Membuat Halaman Index / Home
Setelah halaman registrasi sudah kita buat, selanjutnya kita buat halaman index.php agar ketika website kita akses langsung mengarah ke halaman index.php. Namun sebelum user mengakses halaman index.php. kita akan proteksi dengan set session login. Jadi ketika user belum login, kita set halaman yang akan pertama kali di load adalah halaman login, ketika user login dan berhasil akan redirect ke halaman index.php.
Buat new file di folder project “rumah_coding” dengan nama “index.php”. Paga bagian tag <?php ?> kita membuat session, ketika session belum login akan di redirect ke login.php.
Coba test akses “localhost/rumah_coding/index.php”. maka akan diarahkan ke halaman login.php. Kemudian coba akses halaman registrasi di “localhost/rumah_coding/registrasi.php” dan buat username “admin” password “admin”. dan lakukan login. Jika login berhasil akan di arahkan ke halaman index.php.
Silahkan copy source code nya dibawah ini dan pelajari logikanya.
<?php
session_start();
if (!isset($_SESSION[“login”])){
header(“Location: login.php”);
exit;
}
require ‘function.php’;
?>
<!DOCTYPE html>
<html>
<head>
<!–Import Google Icon Font–>
<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>
<!–Import materialize.css–>
<link type=”text/css” rel=”stylesheet” href=”css/materialize.min.css” media=”screen,projection”/>
<link type=”text/css” rel=”stylesheet” href=”fonts/fontawesome-all.css”>
<link rel=”stylesheet” href=”css/style.css”>
<title>Rumah Coding</title>
<!–Let browser know website is optimized for mobile–>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>
</head>
<body id=”home” class=”scrollspy”>
<!– navbar –>
<div class=”navbar-fixed”>
<nav class=”teal darken-3″>
<div class=”container”>
<div class=”nav-wrapper”>
<a href=”#home!” class=”brand-logo”>Rumah Coding</a>
<a href=”#” data-target=”mobile-nav” class=”sidenav-trigger”><i class=”material-icons”>menu</i></a>
<ul class=”right hide-on-med-and-down”>
<li><a href=”index.php”>Home</a></li>
<li><a href=”data_pelajar.php”>Data Pelajar</a></li>
<li><a href=””>Jadwal Belajar</a></li>
<li><a href=”paket_kursus.php”>Paket Kursus</a></li>
<li><a href=”logout.php” class=”tooltipped” data-position=”bottom” data-tooltip =”Logout”><i class=”material-icons”>account_circle</i></a></li>
</ul>
</div>
</div>
</nav>
</div>
<!– sidenav –>
<ul class=”sidenav teal darken” id=”mobile-nav”>
<li><a href=”index.php”>Home</a></li>
<li><a href=”data_pelajar.php”>Data Pelajar</a></li>
<li><a href=””>Jadwal Belajar</a></li>
<li><a href=”paket_kursus.php”>Paket Kursus</a></li>
<li><a href=”logout.php” class=”tooltipped” data-position=”bottom” data-tooltip =”Logout”><i class=”material-icons”>account_circle</i></a></li>
</ul>
<!– slider –>
<div class=”slider”>
<ul class=”slides”>
<li>
<img src=”img/slider/1.png”> <!– random image –>
<div class=”caption left-align”>
<h3>Online Coding IT Solution</h3>
<h5 class=”light grey-text text-lighten-3″>Enjoy the ease of learning.</h5>
</div>
</li>
<li>
<img src=”img/slider/2.png”> <!– random image –>
<div class=”caption right-align”>
<h3>User Friendly</h3>
<h5 class=”light grey-text text-lighten-3″>Features that are easy to understand.</h5>
</div>
</li>
<li>
<img src=”img/slider/3.png”> <!– random image –>
<div class=”caption center-align”>
<h3>What You Get After Signing Up</h3>
<h5 class=”light grey-text text-lighten-3″>Souvenirs, Manual Book, Full Access E-Learning and certificates</h5>
</div>
</li>
</ul>
</div>
<!– about –>
<section id=”about” class=”about section scrollspy”>
<div class=”container”>
<div class=”row”>
<h3 class=”center light grey-text text-darken-3″>About Us</h3>
<div class=”col m6 s12 “>
<h5>Rumah Coding</h5>
<p>Kami menyediakan jasa kursus online melalui website ini dengan biaya relatif murah,pengguna bisa menikmati fasilitas yang lumayan bagus. Kami tidak hanya menyediakan layanan secara online, namun juga menyediakan ruang belajar secara langsung di tempat kursus kami. Untuk saat ini pelajaran yang kami berikan adalah seputar HTML, CSS, PHP, dan JavaScript. dan tentunya akan hadir lagi banyak materi yang baru kedepannya.</p>
</div>
<div class=”col m6 s12″>
<p>HTML</p>
<div class=”progress”>
<div class=”determinate blue” style=”width: 95%;”></div>
</div>
<p>CSS</p>
<div class=”progress”>
<div class=”determinate blue” style=”width: 90%;”></div>
</div>
<p>PHP</p>
<div class=”progress”>
<div class=”determinate blue” style=”width: 85%;”></div>
</div>
<p>JAVASCRIPT</p>
<div class=”progress”>
<div class=”determinate blue” style=”width: 95%;”></div>
</div>
</div>
</div>
</div>
</section>
<!– services learning –>
<section id=”e-learning” class=”e-learning grey lighten-2″>
<div class=”container”>
<div class=”row”>
<h3 class=”center light grey-text text-darken-3″>Live To Learn</h3>
<div class=”col m3 s6″>
<div class=”card hoverable”>
<div class=”card-image waves-effect waves-block waves-light”>
<img class=”activator” src=”img/learning/html.png”>
</div>
<div class=”card-content”>
<span class=”card-title activator grey-text text-darken-4″>HTML</span>
<p><a href=”#”>Kunjungi</a></p>
</div>
</div>
</div>
<div class=”col m3 s6″>
<div class=”card hoverable”>
<div class=”card-image waves-effect waves-block waves-light”>
<img class=”activator” src=”img/learning/css.png”>
</div>
<div class=”card-content”>
<span class=”card-title activator grey-text text-darken-4″>CSS</span>
<p><a href=”#”>Kunjungi</a></p>
</div>
</div>
</div>
<div class=”col m3 s6″>
<div class=”card hoverable”>
<div class=”card-image waves-effect waves-block waves-light”>
<img class=”activator” src=”img/learning/php.png”>
</div>
<div class=”card-content”>
<span class=”card-title activator grey-text text-darken-4″>PHP</span>
<p><a href=”#”>Kunjungi</a></p>
</div>
</div>
</div>
<div class=”col m3 s6″>
<div class=”card hoverable”>
<div class=”card-image waves-effect waves-block waves-light”>
<img class=”activator” src=”img/learning/js2.png”>
</div>
<div class=”card-content”>
<span class=”card-title activator grey-text text-darken-4″>JAVASCRIPT</span>
<p><a href=”#”>Kunjungi</a></p>
</div>
</div>
</div>
</div>
</section>
<!– experience –>
<section id=”experience” class=”experience section scrollspy”>
<div class=”container”>
<div class=”row”>
<h3 class=”center light grey-text text-darken-3″>Disusun Oleh Kelompok 2</h3>
<div class=”col m4 s12″>
<div class=”card hoverable”>
<h5 class=”header center”>Helmy Fakhrudin</h5>
<h5 class=”header center”>201543501591</h5>
<div class=”card horizontal”>
<div class=”card-image”>
<img class=”circle” src=”img/student/helmy.png”>
</div>
<div class=”card-stacked”>
<div class=”card-content”>
<p>Rumah Coding, biaya murah tanpa murahan.</p>
</div>
</div>
</div>
</div>
</div>
<div class=”col m4 s12″>
<div class=”card hoverable”>
<h5 class=”header center”>Maya Haryani</h5>
<h5 class=”header center”>201543501606</h5>
<div class=”card horizontal”>
<div class=”card-image”>
<img src=”img/student/maya.png”>
</div>
<div class=”card-stacked”>
<div class=”card-content”>
<p>Instrukturnya ramah, materinya mudah dipahami.</p>
</div>
</div>
</div>
</div>
</div>
<div class=”col m4 s12″>
<div class=”card hoverable”>
<h5 class=”header center”>Malik Ibrahim</h5>
<h5 class=”header center”>20154350</h5>
<div class=”card horizontal”>
<div class=”card-image”>
<img src=”img/student/3.jpg”>
</div>
<div class=”card-stacked”>
<div class=”card-content”>
<p>Waktu belajar flexibel, jadwal belajarnya bisa diatur sendiri.</p>
</div>
</div>
</div>
</div>
</div>
<div class=”col m4 s12″>
<div class=”card hoverable”>
<h5 class=”header center”>Erriwhan Setiorini</h5>
<h5 class=”header center”>201543501569</h5>
<div class=”card horizontal”>
<div class=”card-image”>
<img src=”img/student/erriwhan.png”>
</div>
<div class=”card-stacked”>
<div class=”card-content”>
<p>Materi yang diberikan menarik dan sesuai dengan apa yang diharapkan.</p>
</div>
</div>
</div>
</div>
</div>
<div class=”col m4 s12″>
<div class=”card hoverable”>
<h5 class=”header center”>Erlina Masayu</h5>
<h5 class=”header center”>201543501964</h5>
<div class=”card horizontal”>
<div class=”card-image”>
<img src=”img/student/erlina.png”>
</div>
<div class=”card-stacked”>
<div class=”card-content”>
<p>Ruang belajar nyaman, luas dan suasana sejuk sehingga tidak membosankan.</p>
</div>
</div>
</div>
</div>
</div>
<div class=”col m4 s12″>
<div class=”card hoverable”>
<h5 class=”header center”>Rizqi Prasetyo</h5>
<h5 class=”header center”>201543501741</h5>
<div class=”card horizontal”>
<div class=”card-image”>
<img src=”img/student/tiyo.png”>
</div>
<div class=”card-stacked”>
<div class=”card-content”>
<p>Rumah Coding, menjadi jawaban anda para pelajar informatika.</p>
</div>
</div>
</div>
</div>
</div>
<div class=”col offset-s2 m4 s12″>
<div class=”card hoverable”>
<h5 class=”header center”>Joko Suradno</h5>
<h5 class=”header center”>201543500007</h5>
<div class=”card horizontal”>
<div class=”card-image”>
<img src=”img/student/joko.png”>
</div>
<div class=”card-stacked”>
<div class=”card-content”>
<p>Rumah Coding, menjadi jawaban anda para pelajar informatika.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!– contact Us –>
<section id=”contact” class=”contact grey lighten-3 section scrollspy”>
<div class=”container”>
<h3 class=”center grey-text text-darken-3″>Contact Us</h3>
<div class=”row”>
<div class=”col m5 s12″>
<div class=”card-panel teal darken center white-text”>
<i class=”material-icons”>contact_phone</i>
<h5>Contact Us</h5>
<p>Hubungi kami atau datang langsung ke stand kami.</p>
</div>
<ul class=”collection with-header”>
<li class=”collection-item valign-wrapper”>Rumah Coding</li>
<li class=”collection-item valign-wrapper”>Jl. Raya Margonda</li>
<li class=”collection-item valign-wrapper”>Margonda – Depok</li>
<li class=”collection-item valign-wrapper”>Phone +6287875719260</li>
<li class=”collection-item valign-wrapper”>Email rumah_coding@gmail.com</li>
</ul>
</div>
<div class=”col m7 s12″>
<form action=””>
<div class=”card-panel hoverable”>
<h5>Kirimkan kami pesan</h5>
<div class=”input-field”>
<input type=”text” name=”name” id=”name” required class=”validate”>
<label for=”text”>Name</label>
</div>
<div class=”input-field”>
<input type=”email” name=”email” id=”email” required class=”validate”>
<label for=”email”>Email</label>
</div>
<div class=”input-field”>
<input type=”text” name=”phone” id=”phone” required>
<label for=”phone”>Phone</label>
</div>
<div class=”input-field”>
<textarea name=”message” id=”message” class=”materialize-textarea”></textarea>
<label for=”message”>Message</label>
</div>
<button type=”submit” class=”btn teal darken”>Send</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!– footer –>
<footer class=”teal darken-3 white-text center”>
<p>Helmy Fakhrudin (201543501591) || Copyright 2018</p>
</footer>
<!–JavaScript at end of body for optimized loading–>
<script type=”text/javascript” src=”js/materialize.min.js”></script>
<script type=”text/javascript” src=”js/script.js”></script>
</body>
</html>