Cara Membuat Web Surat Izin Sekolah yang Keren dan Menarik
Cerita singkatnya begini, Web Surat Izin ini saya buat saat saya mencoba bereksperimen, bagaimana caranya membuat surat tanpa harus mengetik satu per satu. Jadi saya memecahkan masalah tersebut dengan membuat web surat izin ini.
Jika anda penasaran sama web surat izinnya, anda bisa cek disini. Website yang saya buat ini nanti merupakan website statis dan dinamis.
Langsung saja simak cara pembuatan website tersebut.
Cara Membuat Web Surat Izin Sekolah
Sebelum mulai membuat website surat izin, diwajibkan mempersiapkan:
1. Alat Tempur Laptop/PC/Komputer.
2. Install Xampp (wajib), jika belum punya download disini.
3. Koneksi Internet, karena harus masuk ke asset web boostrap.
3. Koneksi Internet, karena harus masuk ke asset web boostrap.
3. Aplikasi Text Editor (Notepad, Notepad++, Sublime Text, VSC, dll).
4. Niat yang tulus.
Setelah mengikuti hal-hal diatas, kemudian saatnya kita mulai membuat web tersebut.
Langkah 1: Membuat File dan Folder
Dilangkah pertama, hal yang pertama dilakukan adalah membuat sebuah folder dan beri nama bebas, contohnya disini saya memberi nama "surat-izin".
Dan buat File: "index.php, "dashboard.php", "db.php", "auth.php", "logout.php", "registration.php", "tutorial.php". Dan buat Folder :"img", "surat".
Baca Juga: Blogger VS Wordpress, Menurut Pengalaman Pribadi
Baca Juga: Blogger VS Wordpress, Menurut Pengalaman Pribadi
Jika bingung lihat gambar dibawah ini.
Dan buat file lagi, dan masukkan kedalam folder "surat". Buat file PHP dengan nama: "buat_surat.php", "buat_surat2.php", "index.php", "index2.php".
Jika bingung lihat gambar dibawah ini.
Langkah 2: Copy dan Paste Kode
Dilangkah kedua ini masukan kode dan pastekan file yang dibuat tadi.
File PHP: "index.php"
Copy dan pastekan kode dibawah ini ke file "index.php" yang sudah dibuat tadi.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buat Surat Izin Sekolah Secepat Kilat - Generator</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="img/icon.png">
<meta name="description" content="Buat Surat Izin Sekolah Kamu disini dijamin Cepat dan Mudah">
<meta name="keywords" content="Bikin SUrat,surat,surat izin,make surat izin,surat sekolah,contoh surat sekolah,surat sekolah generator,surat izin generator,surat izin tidak masuk sekolah,surat sekolah,surat tdk masuk,surat izin tdk sekolah">
<meta name="author" content="Ahmad Ansori">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
color: black;
}
p {font-size: 16px;}
.margin {margin-bottom: 45px;}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.bg-4 {
background-color: #2f2f2f; /* Black Gray */
color: #fff;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="tutorial.php">Tutorial</a></li>
<li><a href="about.php">Tentang Saya</a></li>
<li><a href="contact.php">Kontak</a></li>
</ul>
</div>
</div>
</nav>
<center>
<?php
require('db.php');
session_start();
// If form submitted, insert values into the database.
if (isset($_POST['username'])){
// removes backslashes
$username = stripslashes($_REQUEST['username']);
//escapes special characters in a string
$username = mysqli_real_escape_string($con,$username);
$password = stripslashes($_REQUEST['password']);
$password = mysqli_real_escape_string($con,$password);
//Checking is user existing in the database or not
$query = "SELECT * FROM `users` WHERE username='$username'
and password='".md5($password)."'";
$result = mysqli_query($con,$query) or die(mysql_error());
$rows = mysqli_num_rows($result);
if($rows==1){
$_SESSION['username'] = $username;
// Redirect user to dashboard.php
header("Location: dashboard.php");
}else{
echo "<div class='form'>
<h3>Username/password kamu salah :(</h3>
<br/>Klik disini untuk <a href='index.php'>Login</a></div>";
}
}else{
?>
<div class="form">
<h1>Silahkan Masuk | Untuk Membuat Surat Izin</h1>
<form action="" method="post" name="login">
<input type="text" name="username" placeholder="Username" required />
<input type="password" name="password" placeholder="Password" required />
<input name="submit" type="submit"class="btn btn-primary" value="Login" />
</form>
<p>Belum Punya Akun? <a href='registration.php'>Daftar Disini</a></p>
</div>
<?php } ?>
<img src="img/3.gif" class="img-rounded" height="250px"></center>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p>Aplikasi Web dibuat oleh <a href="https://www.ansoriweb.com/">ansoriweb.com</a></p>
</footer>
</body>
</html>
File PHP: "auth.php"
Copy dan pastekan kode dibawah ini ke file "auth.php" yang sudah dibuat tadi.
<?php
session_start();
if(!isset($_SESSION["username"])){
header("Location: login.php");
exit(); }
?>
File PHP: "db.php"
Copy dan pastekan kode dibawah ini ke file "db.php" yang sudah dibuat tadi.
<?php
// Enter your Host, username, password, database below.
// I left password empty because i do not set password on localhost.
$con = mysqli_connect("localhost","root","","register");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>Copy dan pastekan kode dibawah ini ke file "dashboard.php" yang sudah dibuat tadi.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard | Buat Surat Izin Sekolah Generator</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="img/icon.png">
<meta charset="UTF-8">
<meta name="description" content="Buat Surat Izin Sekolah Kamu disini dijamin Cepat dan Mudah">
<meta name="keywords" content="Bikin SUrat,surat,surat izin,make surat izin,surat sekolah,contoh surat sekolah,surat sekolah generator,surat izin generator,surat izin tidak masuk sekolah,surat sekolah,surat tdk masuk,surat izin tdk sekolah">
<meta name="author" content="Ahmad Ansori">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
color: black;
}
p {font-size: 16px;}
.margin {margin-bottom: 45px;}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.bg-4 {
background-color: #2f2f2f; /* Black Gray */
color: #fff;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
</style>
</head>
<body>
<?php
session_start();
if(empty($_SESSION['username'])){
header("location:index.php");
}
?>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Dashboard</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="tutorial.php">Tutorial</a></li>
<li><a href="about.php">Tentang Saya</a></li>
<li><a href="logout.php">Keluar</a></li>
</ul>
</div>
</div>
</nav>
<center>
<?php
$tanggal= mktime(date("m"),date("d"),date("Y"));
echo "Tanggal : <b>".date("d-M-Y", $tanggal)."</b> ";
date_default_timezone_set('Asia/Jakarta');
$jam=date("H:i:s");
echo "| Pukul : <b>". $jam." "."</b>";
$a = date ("H");
if (($a>=6) && ($a<=11)){
echo "<b>, Selamat Pagi :)</b>";
}
else if(($a>11) && ($a<=15))
{
echo ", Selamat Pagi !!";}
else if (($a>15) && ($a<=18)){
echo ", Selamat Malam !!";}
else { echo ", <b> Selamat Malam :) </b>";}
?>
<h1 >Selamat Datang <?php echo $_SESSION['username']?>! </h1>
<a href="surat" class="btn btn-primary" >Buat Surat Izin v.1</a><br>
<a href="surat/index2.php" class="btn btn-warning" >Buat Surat Izin v.2</a><br>
<a href="about.php" class="btn btn-success">Tentang Saya</a><br>
<a href="logout.php" class="btn btn-info">Keluar</a><br>
<img src="img/2.gif" class="img-rounded" height="250px">
<center>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p>Aplikasi Web dibuat oleh <a href="https://www.ansoriweb.com/">ansoriweb.com</a></p>
</footer>
</body>
</html>
File PHP: "logout.php"
Copy dan pastekan kode dibawah ini ke file "logout.php" yang sudah dibuat tadi.
File PHP: "registration.php"Copy dan pastekan kode dibawah ini ke file "logout.php" yang sudah dibuat tadi.
<?php
session_start();
if(session_destroy()){
header("Location: index.php");
}
?>Copy dan pastekan kode dibawah ini ke file "registration.php" yang sudah dibuat tadi.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Daftar | Buat Surat Izin Sekolah Generator</title>
<link rel="icon" type="image/png" href="img/icon.png">
<meta charset="utf-8">
<meta name="description" content="Buat Surat Izin Sekolah Kamu disini dijamin Cepat dan Mudah">
<meta name="keywords" content="Bikin SUrat,surat,surat izin,make surat izin,surat sekolah,contoh surat sekolah,surat sekolah generator,surat izin generator,surat izin tidak masuk sekolah,surat sekolah,surat tdk masuk,surat izin tdk sekolah">
<meta name="author" content="Ahmad Ansori">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
color: black;
}
p {font-size: 16px;}
.margin {margin-bottom: 45px;}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.bg-4 {
background-color: #2f2f2f; /* Black Gray */
color: #fff;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="tutorial.php">Tutorial</a></li>
<li><a href="about.php">Tentang Saya</a></li>
<li><a href="contact.php">Kontak</a></li>
</ul>
</div>
</div>
</nav>
<center>
<?php
require('db.php');
// If form submitted, insert values into the database.
if (isset($_REQUEST['username'])){
// removes backslashes
$username = stripslashes($_REQUEST['username']);
//escapes special characters in a string
$username = mysqli_real_escape_string($con,$username);
$email = stripslashes($_REQUEST['email']);
$email = mysqli_real_escape_string($con,$email);
$password = stripslashes($_REQUEST['password']);
$password = mysqli_real_escape_string($con,$password);
$trn_date = date("Y-m-d H:i:s");
$query = "INSERT into `users` (username, password, email, trn_date)
VALUES ('$username', '".md5($password)."', '$email', '$trn_date')";
$result = mysqli_query($con,$query);
if($result){
echo "<div class='form'>
<h2>Pendaftaran Kamu Berhasil!</h2>
<br/>Klik disini untuk <a href='index.php'>Login</a></div>";
}
}else{
?>
<div class="form">
<h1>Daftar | Untuk Membuat Surat Izin</h1>
<form name="registration" action="" method="post">
<input type="text" name="username" placeholder="Username" required />
<input type="email" name="email" placeholder="Email" required />
<input type="password" name="password" placeholder="Password" required />
<input type="submit" name="submit" class="btn btn-primary" value="Register" />
</form>
</div>
<?php } ?>
<img src="img/1.gif" class="img-rounded" height="300px"></center>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p>Aplikasi Web dibuat oleh <a href="https://www.ansoriweb.com/">ansoriweb.com</a></p>
</footer>
</body>
</html>
File PHP: "tutorial.php"
Copy dan pastekan kode dibawah ini ke file "tutorial.php" yang sudah dibuat tadi.
Copy dan pastekan kode dibawah ini ke file "tutorial.php" yang sudah dibuat tadi.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial | Buat Surat Izin Sekolah Generator</title>
<link rel="icon" type="image/png" href="img/icon.png">
<meta name="description" content="Buat Surat Izin Sekolah Kamu disini dijamin Cepat dan Mudah">
<meta name="keywords" content="Bikin SUrat,surat,surat izin,make surat izin,surat sekolah,contoh surat sekolah,surat sekolah generator,surat izin generator,surat izin tidak masuk sekolah,surat sekolah,surat tdk masuk,surat izin tdk sekolah">
<meta name="author" content="Ahmad Ansori">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
color: black;
}
p {font-size: 16px;}
.margin {margin-bottom: 45px;}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.bg-4 {
background-color: #2f2f2f; /* Black Gray */
color: #fff;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="tutorial.php">Tutorial</a></li>
<li><a href="about.php">Tentang Saya</a></li>
<li><a href="contact.php">Kontak</a></li>
</ul>
</div>
</div>
</nav>
<center>
<h2>Tutorial Buat Surat Izin</h2><br>
<img src="img/login.jpg" class="img-rounded" height="150px"><br>
<p>1. Silahkan Login Kalau Sudah Daftar, Kalau Belum Silahkan Daftar di Menu Bawahnya.<br>
<img src="img/daftar.jpg" class="img-rounded" height="150px"><br>
2. Setelah tampilan seperti diatas silahkan isikan dengan benar. Jika daftar berhasil klik Login kembali.<br>
<img src="img/menu.jpg" class="img-rounded" height="150px"><br>
3. Setelah Login berhasil maka kamu akan diarahkan ke manu dashboard dan klik "Buat Surat Izin v.1"tanpa kata Assalamualaikum Wr.Wb. <br>"Buat Surat Izin v.2" Dengan kata Assalamualaikum Wr.Wb<br>
<img src="img/buat.jpg" class="img-rounded" height="150px"><br>
4. Setelah itu isikan data dengan benar tanpa terkecuali dan klik "Kirim".<br>
<img src="img/cetak.jpg" class="img-rounded" height="150px"><br>
5. Setelah kamu klik "Kirim" otomatis membuka halaman baru dan klik Cetak/Print. <br>Untuk menghilangan Header dan Footer bisa klik > Setelan Lain> Dan Jangan Centang Opsi "Header dan Footer"<br>
</center>
<!-- Footer --><br>
<footer class="container-fluid bg-4 text-center">
<p>Aplikasi Web dibuat oleh <a href="https://www.ansoriweb.com/">ansoriweb.com</a></p>
</footer>
</body>
</html>
File Database
Untuk file databasenya anda bisa copy kode berikut ini.
-- phpMyAdmin SQL Dump
-- version 4.9.0.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Dec 11, 2019 at 11:40 AM
-- Server version: 10.3.16-MariaDB
-- PHP Version: 7.2.20
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `register`
--
-- --------------------------------------------------------
--
-- Table structure for table `users`
--
CREATE TABLE `users` (
`id` int(11) NOT NULL,
`username` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
`trn_date` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `users`
--
INSERT INTO `users` (`id`, `username`, `email`, `password`, `trn_date`) VALUES
(01, 'ansoriweb', 'ansoriweb@gmail.com', 'c474e07d463c2bb55f22b870d79ac7d4', '2019-11-11 07:56:17');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `users`
--
ALTER TABLE `users`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=34;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
File PHP
Untuk file "index.php" yang di folder "surat" anda bisa copy kode berikut ini.
<html>
<head>
<title>Buat Surat Izin v.1 | Buat Surat Izin Sekolah Generator</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="img/icon.png">
<meta name="description" content="Buat Surat Izin Sekolah Kamu disini dijamin Cepat dan Mudah">
<meta name="keywords" content="Bikin SUrat,surat,surat izin,make surat izin,surat sekolah,contoh surat sekolah,surat sekolah generator,surat izin generator,surat izin tidak masuk sekolah,surat sekolah,surat tdk masuk,surat izin tdk sekolah">
<meta name="author" content="Ahmad Ansori">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
color: black;
}
p {font-size: 16px;}
.margin {margin-bottom: 45px;}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.bg-4 {
background-color: #2f2f2f; /* Black Gray */
color: #fff;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
</style>
</head>
<body>
<?php
session_start();
if(empty($_SESSION['username'])){
header("location:/index.php");
}
?>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Dashboard</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="/tutorial.php">Tutorial</a></li>
<li><a href="/about.php">Tentang Saya</a></li>
<li><a href="/logout.php">Keluar</a></li>
</ul>
</div>
</div>
</nav>
<center>
<h3>Isikan Data dengan Benar!<br></h3>
<form action="buat_surat.php" method="get">
Nama Lengkap: <input type="text" name="nama"><br>
Asal Sekolah: <input type="text" name="sekolah"><br>
Kelas: <input type="text" name="kelas"><br>
Nama Ortu/Wali: <input type="text" name="ortu"><br>
Alamat: <input type="text" name="alamat"><br>
Nama Kota/Kab: <input type="text" name="kota"><br>
Alasan Tidak Masuk: <input type="text" name="alasan"><br>
Hari: <input type="text" name="hari"><br>
Tanggal Tidak Masuk: <input type="text" name="tanggal"><br><br>
<input class="btn btn-success" type="submit">
</form></center>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p>Aplikasi Web dibuat oleh <a href="https://www.ansoriweb.com/">ansoriweb.com</a></p>
</footer>
</body>
</html>
</body>
</html>
File PHP
Untuk file "index2.php" yang di folder "surat" anda bisa copy kode berikut ini.
<html>
<head>
<title>Buat Surat Izin v.2 | Buat Surat Izin Sekolah Generator</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="img/icon.png">
<meta name="description" content="Buat Surat Izin Sekolah Kamu disini dijamin Cepat dan Mudah">
<meta name="keywords" content="Bikin SUrat,surat,surat izin,make surat izin,surat sekolah,contoh surat sekolah,surat sekolah generator,surat izin generator,surat izin tidak masuk sekolah,surat sekolah,surat tdk masuk,surat izin tdk sekolah">
<meta name="author" content="Ahmad Ansori">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
color: black;
}
p {font-size: 16px;}
.margin {margin-bottom: 45px;}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.bg-4 {
background-color: #2f2f2f; /* Black Gray */
color: #fff;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
</style>
</head>
<body>
<?php
session_start();
if(empty($_SESSION['username'])){
header("location:/index.php");
}
?>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Dashboard</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="/tutorial.php">Tutorial</a></li>
<li><a href="/about.php">Tentang Saya</a></li>
<li><a href="/logout.php">Keluar</a></li>
</ul>
</div>
</div>
</nav>
<center>
<h3>Isikan Data dengan Benar!<br></h3>
<form action="buat_surat2.php" method="get">
Nama Lengkap: <input type="text" name="nama"><br>
Asal Sekolah: <input type="text" name="sekolah"><br>
Kelas: <input type="text" name="kelas"><br>
Nama Ortu/Wali: <input type="text" name="ortu"><br>
Alamat: <input type="text" name="alamat"><br>
Nama Kota/Kab: <input type="text" name="kota"><br>
Alasan Tidak Masuk: <input type="text" name="alasan"><br>
Hari: <input type="text" name="hari"><br>
Tanggal Tidak Masuk: <input type="text" name="tanggal"><br><br>
<input class="btn btn-success" type="submit">
</form></center>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p>Aplikasi Web dibuat oleh <a href="https://www.ansoriweb.com">ansoriweb.com</a></p>
</footer>
</body>
</html>
</body>
</html>
File PHP
Untuk file "buat_surat.php" yang di folder "surat" anda bisa copy kode berikut ini.
<html>
<head>
<title>Sukses | Buat Surat Izin Sekolah Generator</title>
<link rel="icon" type="image/png" href="img/icon.png">
<meta charset="utf-8">
<meta name="description" content="Buat Surat Izin Sekolah Kamu disini dijamin Cepat dan Mudah">
<meta name="keywords" content="Bikin SUrat,surat,surat izin,make surat izin,surat sekolah,contoh surat sekolah,surat sekolah generator,surat izin generator,surat izin tidak masuk sekolah,surat sekolah,surat tdk masuk,surat izin tdk sekolah">
<meta name="author" content="Ahmad Ansori">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
body {font-family: arial;
}
div.a {text-align: right;
}
</style>
<body>
<br><br><br><br><br>
<div class='a'>
<?php echo $_GET["kota"]; ?>, <?php echo $_GET["tanggal"]; ?><br><br>
Kepada Yth, <br>
Bapak/Ibu Guru Wali Kelas <?php echo $_GET["kelas"]; ?><br>
<?php echo $_GET["sekolah"]; ?><br><br><br>
</div>
Dengan Hormat,<br>
Dengan Ini saya selaku Orang Tua/Wali Murid dari:<br><br>
Nama: <?php echo $_GET["nama"]; ?><br>
Siswa: Kelas <?php echo $_GET["kelas"]; ?> <?php echo $_GET["sekolah"]; ?><br>
Alamat: <?php echo $_GET["alamat"]; ?><br><br>
Memberitahukan bahwa anak saya tersebut tidak dapat mengikuti pelajaran seperti biasa pada hari <?php echo $_GET["hari"]; ?> <?php echo $_GET["tanggal"]; ?> dikarenakan <u><?php echo $_GET["alasan"]; ?></u>. <br>Oleh karena itu, Kami memohon
Bapak/Ibu Guru Wali kelas <?php echo $_GET["kelas"]; ?> agar memberikan izin.<br><br>
Demikian yang dapat kami sampaikan. Atas perhatian Bapak/Ibu kami ucapkan terimakasih.<br><br>
<div class='a'>
Hormat Kami,<br>
Orang Tua/Wali Murid<br><br><br><br><br>
(<?php echo $_GET["ortu"]; ?>)
</div>
<script>
window.print();
</script>
</body>
</html>
File PHP
Untuk file "buat_surat2.php" yang di folder "surat" anda bisa copy kode berikut ini.
<html>
<head>
<title>Sukses | Buat Surat Izin Sekolah Generator</title>
<link rel="icon" type="image/png" href="img/icon.png">
<meta charset="utf-8">
<meta name="description" content="Buat Surat Izin Sekolah Kamu disini dijamin Cepat dan Mudah">
<meta name="keywords" content="Bikin SUrat,surat,surat izin,make surat izin,surat sekolah,contoh surat sekolah,surat sekolah generator,surat izin generator,surat izin tidak masuk sekolah,surat sekolah,surat tdk masuk,surat izin tdk sekolah">
<meta name="author" content="Ahmad Ansori">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
body {font-family: arial;
}
div.a {text-align: right;
}
</style>
<body>
<br><br><br><br><br>
<div class='a'>
<?php echo $_GET["kota"]; ?>, <?php echo $_GET["tanggal"]; ?><br><br>
Kepada Yth, <br>
Bapak/Ibu Guru Wali Kelas <?php echo $_GET["kelas"]; ?><br>
<?php echo $_GET["sekolah"]; ?><br><br><br>
</div>
Assalamualaikum Warahmatullahi Wabarakatuh<br><br>
Dengan Hormat,<br>
Dengan Ini saya selaku Orang Tua/Wali Murid dari:<br><br>
Nama: <?php echo $_GET["nama"]; ?><br>
Siswa: Kelas <?php echo $_GET["kelas"]; ?> <?php echo $_GET["sekolah"]; ?><br>
Alamat: <?php echo $_GET["alamat"]; ?><br><br>
Memberitahukan bahwa anak saya tersebut tidak dapat mengikuti pelajaran seperti biasa pada hari <?php echo $_GET["hari"]; ?> <?php echo $_GET["tanggal"]; ?> dikarenakan <u><?php echo $_GET["alasan"]; ?></u>. <br>Oleh karena itu, Kami memohon
Bapak/Ibu Guru Wali kelas <?php echo $_GET["kelas"]; ?> agar memberikan izin.<br><br>
Demikian yang dapat kami sampaikan. Atas perhatian Bapak/Ibu kami ucapkan terimakasih.<br><br>
Wassalamualaikum Warahmatullahi Wabarakatuh<br><br>
<div class='a'>
Hormat Kami,<br>
Orang Tua/Wali Murid<br><br><br><br><br>
(<?php echo $_GET["ortu"]; ?>)
</div>
<script>
window.print();
</script>
</body>
</html> Untuk asset gambarnya anda bisa download disini (password ZIP: www.ansoriweb.com), nanti taruh difolder "img".
Baca Juga: Software yang Harus di Install di PC dan Laptop Baru
Langkah 2: Cara Instalasi Script Kode
Berikut ini langkah-langkah pemasangan script dan mengkoneksikan databasenya. Mohon simak secara teliti.
- Hal yang pertama yang anda lakukan adalah menginstall aplikasi xampp diatas tadi.
- Setelah itu buat folder dan taruh di Local Disk C>xampp>htdocs>taruh disini. Untuk nama foldernya bebas.
- Kemudian nyalakan xampp controlnya, dengan cara masuk Local Disk C>xampp>xampp-control.exe. Dan buka dan klik "Start" disemua Actions.
- Setelah itu silahkan membuka filenya dibrowser caranya dengan ketik localhost/namafolder, dan enter otomatis akan membuka web tersebut.
- Setelah web terbuka buka tab baru dan tulis localhost/phpmyadmin, setelah itu buat sebuah database baru. Setelah itu pilih menu "SQL", dan paste kode database diatas yang sudah saya sediakan tadi. Dan pastekan dikolom yang sudah disediakan lalu klik "GO" atau "Pergi".
- Kemudian ubah kode di "db.php", dan ganti sesuai db yang anda buat tadi yang saya beri warna biru dan save.
- Setelah itu Coba daftar dan login kedalam web tersebut. Jika berhasil berarti langkah yang saya jelaskan tadi sudah benar. Jika belum silahkan berkomentar.
Penutup
Itulah tadi Cara Membuat Web Surat Izin Sekolah yang Keren dan Menarik. Web surat izin ini cocok untuk anda yang suka malas menulis dikertas.
Dizaman ini kita sebagai anak milenial harus berinovasi, kreatif, dan menuangkan ide-ide agar perkerjaan kita agar mudah dan cepat. Untuk fitur dan halamannya anda bisa mengubah sendiri, tapi ingat jangan hapus credit url web saya dibagian footer.
Semoga website surat izin ini bermanfaat bagi anda yang sedang belajar tentang dunia website. Jika ada kesulitan atau hal yang saya jelaskan kurang jelas anda bisa berkomentar dibawah ini. Terima Kasih.
ini script di copy visual studio bisa berjalan tidak
bisa kak, tapi harus ada xamppnya
permisi mas mau nanya, kalau ingin mengubah nama hasil suratnya gimana ya mas? terimakasih
buat tutorial youtubnya bang! saya bingugng di langkah ke 6
siap