Langsung ke konten utama

Cara Membuat Template ada Sign In dan Sign Up dan Logout

Pada pertemuan kali ini saya akan memberikan tutorial tentang Template yang terdapat Sign In, Sign Up dan Logout menggunakan PHP MyAdmin, yukkk langsung saja ke tutorialnya

1. Siapkan yang dibutuhkan seperti server dan aplikasi pendukung, disini saya menggunakan AppServ dan Sublime Text 2. Lalu buatlah basis data baru di http://localhost/phpmyadmin/  seperti dibawah ini

2. Selanjutnya buat file dengan nama index.php codingnya seperti dibawah ini:
<?php
session_start();
if(!isset($_SESSION['username'])) {
   header('location:signin.php');
} else {
   $username = $_SESSION['username'];
}
?>
</head>
  <div class="image fit">
  <a href="signin.php"><img src="images/index.jpg" alt="" /></a>
  </div>
<title>Halaman Sukses Sign In</title>
<div align='center'>
   Selamat Datang, <b><?php echo $username;?></b> <a href="logout.php"><b>Logout</b></a>
</div> 

3. lalu file dengan nama config.php codingnya:
<?php
$db_host = "localhost";
$db_user = "root";
$db_pass = "Keliiz12";
$db_name = "latihan";
try {   
    //create PDO connection
    $db = new PDO("mysql:host=$db_host;dbname=$db_name", $db_user, $db_pass);
} catch(PDOException $e) {
    //show error
    die("Terjadi masalah: " . $e->getMessage());
} 

4. lalu file dengan nama koneksi.php codingnya:
<?php
   $hostname  = "localhost";
   $username  = "root";
   $password  = "Keliiz12";
   $dbname  = "latihan";
   $db = new PDO('mysql:dbname='.$dbname.';host='.$hostname, $username, $password);
?> 

5. lalu file signin.php codingnya:
<?php
   session_start();
   if(isset($_SESSION['username'])) {
   header('location:index.php'); }
   require_once("koneksi.php");
?>
</head>
  <div class="image fit">
  <a href="signin.php"><img src="images/signin.jpg" alt="" /></a>
  </div>
<title>Form Sign In</title>
<div align='center'>
  <form action="prosessignin.php" method="post">
  <h1>Masuk</h1>
  <table>
  <tbody>
  <tr><td>Username</td><td> : <input name="username" type="text"></td></tr>
  <tr><td>Password</td><td> : <input name="password" type="password"></td></tr>
  <tr><td colspan="2" align="right"><input value="Sign In" type="submit"> <input value="Batal" type="reset"></td></tr>
  <tr><td colspan="2" align="center">Belum Punya akun ? <a href="signup.php"><b>Sign Up</b></a></td></tr>
  </tbody>
  </table>
  </form>
</div> 

6. lalu file prosessignin.php codingnya:
</head>
  <div class="image fit">
  <a href="signin.php"><img src="images/prosessignin.jpg" alt="" /></a>
  </div>
<?php
   session_start();
   require_once("koneksi.php");
   $username = $_POST['username'];
   $pass = $_POST['password'];
   $query = $db->prepare("SELECT * FROM user WHERE username = ?");
   $query->execute(array($username));
   $hasil = $query->fetch();
   if($query->rowCount() == 0) {
     echo "<div align='center'>Username Belum Terdaftar! <a href='signin.php'>Back</a></div>";
   } else {
     if($pass <> $hasil['password']) {
       echo "<div align='center'>Password salah! <a href='sign.php'>Back</a></div>";
     } else {
       $_SESSION['username'] = $hasil['username'];
       header('location:index.php');
     }
   }
?> 

7. lalu file signup.php codingnya:
<?php
   session_start();
   if(isset($_SESSION['username'])) {
   header('location:index.php'); }
?>
</head>
  <div class="image fit">
  <a href="signin.php"><img src="images/signup.jpg" alt="" /></a>
  </div>
<title>Form Sign Up</title>
<div align='center'>
  <form action="prosessignup.php" method="post">
  <table>
  <tbody>
  <tr><td colspan="2" align="center"><h1>Daftar Baru</h1></td></tr>
  <tr><td>Username</td><td> : <input name="username" type="text"></td></tr>
  <tr><td>Password</td><td> : <input name="password" type="password"></td></tr>
  <tr><td colspan="2" align="right"><input value="Daftar" type="submit"> <input value="Batal" type="reset"></td></tr>
  <tr><td colspan="2" align="center">Sudah Punya akun ? <a href="login.php"><b>Sign In</b></a></td></tr>
  </tbody>
  </table>
  </form>
</div>
 
8. lalu file prosessignup.php codingnya:
</head>
  <div class="image fit">
  <a href="signin.php"><img src="images/prosessignup.jpg" alt="" /></a>
  </div>
<?php
   require_once("koneksi.php");
   $username = $_POST['username'];
   $pass = $_POST['password'];
   $sql = "SELECT * FROM user WHERE username = '$username'";
   $query = $db->query($sql);
   if($query->num_rows != 0) {
     echo "<div align='center'>Username Sudah Terdaftar! <a href='signup.php'>Back</a></div>";
   } else {
     if(!$username || !$pass) {
       echo "<div align='center'>Masih ada data yang kosong! <a href='signup.php'>Back</a>";
     } else {
       $data = "INSERT INTO user VALUES (NULL, '$username', '$pass')";
       $simpan = $db->query($data);
       if($simpan) {
         echo "<div align='center'>Pendaftaran Sukses, Silahkan <a href='signin.php'>Sign In</a></div>";
       } else {
         echo "<div align='center'>Proses Gagal!</div>";
       }
     }
   }
?>
 
9. lalu file logout.php codingnya:
<?php
   session_start();
   session_destroy();
?>
</head>
  <div class="image fit">
  <a href="signin.php"><img src="images/keluar.jpg" alt="" /></a>
  </div>
<div align="center">
  <h2>Anda telah berhasil Logout...</h2>
  Silahkan klik <a href="signin.php">disini</a> untuk Sign In kembali
</div>

10. Sedangnkan coding dalam Template saya adalah sebagai berikut:
<!DOCTYPE HTML>
<html>
    <head>
        <title>Tsarok by TEMPLATED</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="assets/css/main.css" />
    </head>
    <body>
        <!-- Header -->
            <header id="header">
                <div class="inner">
                    <div class="content">
                        <h1>LoKing<br />
                            (Love Hiking)</h1>
                        <h2>Jangan mengambil apapun selain GAMBAR, Jangan meninggalkan<br />
                        apapun selain JEJAK dan Jangan membunuh apapun selain WAKTU</h2>
                        <a href="#" class="button big alt"><span>Budalkan</span></a>
                    </div>
                    <a href="#" class="button hidden"><span>Budalkan</span></a>
                </div>
            </header>
        <!-- Main -->
            <div id="main">
                <div class="inner">
                    <div class="columns">

                        <!-- Column 1 (horizontal, vertical, horizontal, vertical) -->
                            <div class="image fit">
                                <a href="rinci1.html"><img src="images/semeru.jpg" alt="" /></a>
                            </div>
                            <div class="image fit">
                                <a href="rinci2.html"><img src="images/arjuno.jpg" alt="" /></a>
                            </div>

                        <!-- Column 2 (vertical, horizontal, vertical, horizontal) -->
                            <div class="image fit">
                                <a href="rinci3.html"><img src="images/raung.jpg" alt="" /></a>
                            </div>
                            <div class="image fit">
                                <a href="rinci4.html"><img src="images/welirang.jpg" alt="" /></a>
                            </div>
                            <div class="image fit">
                                <a href="rinci5.html"><img src="images/argopuro.jpg" alt="" /></a>
                            </div>

                        <!-- Column 3 (horizontal, vertical, horizontal, vertical) -->
                            <div class="image fit">
                                <a href="rinci6.html"><img src="images/butak.jpg" alt="" /></a>
                            </div>
                            <div class="image fit">
                                <a href="rinci7.html"><img src="images/ijen.jpg" alt="" /></a>
                            </div>
                            <div class="image fit">
                                <a href="rinci8.html"><img src="images/bromo.jpg" alt="" /></a>
                            </div>
                            <div class="image fit">
                                <a href="rinci9.html"><img src="images/anjasmoro.jpg" alt="" /></a>
                            </div>

                        <!-- Column 4 (vertical, horizontal, vertical, horizontal) -->
                            <div class="image fit">
                                <a href="rinci10.html"><img src="images/panderman.jpg" alt="" /></a>
                            </div>
                            <div class="image fit">
                                <a href="rinci11.html"><img src="images/kelud.jpg" alt="" /></a>
                            </div>
                            <div class="image fit">
                                <a href="rinci12.html"><img src="images/penanggungan.jpg" alt="" /></a>
                            </div>
                            <div class="image fit">
                                <a href="rinci13.html"><img src="images/baluran.jpg" alt="" /></a>
                            </div>
                    </div>
                </div>
            </div>

        <!-- Footer -->
            <footer id="footer">
                <a href="#" class="info fa fa-info-circle"><span>About</span></a>
                <div class="inner">
                    <div class="content">
                        <h3>Gunung Terfavorit Se Jawa Timur</h3>
                        <p>Penikmat Gunung semakin meningkat pada era Milenial ini, mulai dari yang remaja hingga dewasa, mulai dari yang hobi atau hanya sekedar dokumentasi diri, medan yang jarang kita temui dikehidupan sehari-hari sebagai penguji Adrenalin diri</p>
                    </div>
                <div class="copyright">
                        <h3>Follow me</h3>
                        <ul class="icons">
                            <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                            <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
                            <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                        </ul>
                </div>
<?php
   session_start();
   if(isset($_SESSION['username'])) {
   header('location:index.php'); }
   require_once("koneksi.php");
?>
<title>Form Sign In</title>
<div align='center'>
  <form action="prosessignin.php" method="post">
  <h1>Masuk</h1>
  <table>
  <tbody>
  <tr><td colspan="2" align="center"><input value="Sign In" type="submit"></td></tr>
  <tr><td colspan="2" align="center">Belum Punya akun ? <a href="signup.php"><b>Sign Up</b></a></td></tr>

            </footer>
        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/skel.min.js"></script>
            <script src="assets/js/util.js"></script>
            <script src="assets/js/main.js"></script>
    </body>
</html>

11. Tampilan awalnya seperti ini:
 
12. Jika kita belum terdaftar, maka akan muncul seperti dibawah ini, silahkan klik Back

 13. Silahkan daftarkan diri

14. Lalu Masuk

15. Proses Sign In Sukses

16. Dan seperti tampilan Log Out nya
 
Label:
Lokasi: Jl. Gus Dur No.29a, Mojongapitindah, Mojongapit, Kec. Jombang, Kabupaten Jombang, Jawa Timur 61419, Indonesia

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Instal AppServ 32-bit di Windows 10

Postingan kali ini yaitu cara meng-instal AppServ 32-bit di Windows 10. Apa sih AppServ itu ? Jadi AppServ adalah fitur penuh dari Apache, MySQL dan phpMyAdmin. Cukup mudah untuk menginstalnya, hanya membutuhkan waktu kurang lebih 3 menit. Mari kita lihat tutorialnya dibawah ini, Selamat mencoba ^_^ 1. Siapkan Aplikasinya, jika belum ada silahkan download di link  https://www.mediafire.com/file/b5aw2mjv4v4mmql/appserv-win32-8.6.0.exe/file 2. Buka aplikasinya maka akan muncul seperti dibawah ini, lalu klik Next 3. Selanjutnya klik I Agree 4. Penyimpanan secara otomotis ke Drive C, selanjutnya klik Next 5. Centang semuanya, jika sudah klik Next 6. Centang I agree to the license terms and conditions, lalu klik Install 7. Tunggu hingga prosesnya selesai, lalu klik Finish 8. Anda akan diminta mengisi Server Name dan E-mail, Namun anda langsung klik Next saja karena biasanya telah terisi secara otomatis 9. Silahkan masukkan kata sandi yang mudah anda...
1 komentar
Baca selengkapnya

Cara Instal Sublime Text 64-bit di Windows 10

Setelah selesai menginstal Server dari Desain Web yang bisa anda kunjungi di blog saya sebelumnya di  https://pemrogramanwebistib.blogspot.com/2019/04/cara-instal-appserv-64-bit-di-windows-10.html  Selanjutnya kita akan mengisntal Tools nya, banyak tools untuk mengubah code desain web diantaranya Notepad++, Sublime Text, Komodo Edit dan masih banyak lainnya, pada kali ini saya menggunakan Sublime Text. Sublime Text adalah aplikasi text editor untuk menulis dan mengubah code. Banyak bahasa pemrograman yang ada di aplikasi ini, diantaranya PHP, CSS, C, C++, HTML, JAVA dan sebagainya. Oke langsung saja kita lihat tutorialnya dibawah ini, Selamat mencoba ^_^ 1. Instal terlebih dahulu aplikasinya dan bisa didownload di  https://www.mediafire.com/file/a13uj3q22bllo7u/Sublime_Text_2.0.2a_x64_Setup.exe/file 2. Setelah didownload lalu diinstal aplikasinya 3. Klik Next 4. Bisa memilih tempat penyimpanan aplikasi, atau bisa langsung Klik Next 5. Jangan lupa centang Add to...
Posting Komentar
Baca selengkapnya