PRACTICAL MODULE
WEB PROGRAMMING II
By:
Andi, S.Kom., M.Kom
Chapter-6
Creating Login and Register Features with
PHP and MYSQL
1. Start Apache and MySQL in the XAMPP Control Panel and then enter
http://localhost/phpmyadmin or http://localhost:8080/phpmyadmin
(adjust the port used). Then the local web server database management
display will appear.
2. Next, create a database by pressing the databases tab. See red box.
3. A website page appears in the form of a form for creating a database.
Enter id_database in the form provided. ID is replaced with your ID. Then
press the create button. See red box.
4. Then you will be directed to the database management display in the form
of filling in the create table form. Note that on the left side there will be
the name of your database if the database creation process is successful.
See red box.
5. Next, create a member table via query to accommodate registered
member account information and will also be used in the login process. Hit
the SQL tab. See red box.
6. A display appears containing a fairly large form. Enter the following SQL
query to create the members table and then press go.
CREATE TABLE `member` (
`id_member` int(10) NOT NULL,
`nama_lengkap` varchar(255) NOT NULL,
`gender` varchar(1) NOT NULL,
`alamat` varchar(255) NOT NULL,
`tanggallahir` date DEFAULT NULL,
`username` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `member`
ADD PRIMARY KEY (`id_member`);
ALTER TABLE `member`
MODIFY `id_member` int(10) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=1;
7. If the query is correct, the following message will appear and on the left
the member table will appear. See red box.
8. After creating the database and tables, the next step is to create a website
display with login and registration features. Click Sublime Text 3, then the
Sublime Text 3 Text Editor window will open as shown below.
9. Create a new folder with the name meeting6. See red box.
10. Then create a new file with the file name index.php in the meeting6 folder.
See red box.
11. Then create a new folder with the name dashboard and settings in the
meeting6 folder as shown in the image below. See red box.
12. In the dashboard folder, create an index.php file and in the settings folder
two files with the names check_session_after_login.php,
check_session_before_login.php, and connection.php. See red box.
13. Next, create two files in the meeting6 folder with the names register.php
and register_member_process.php. See red box.
14. Create a CSS file for meeting 6 with the name stylemeeting6.css. See red
box.
15. Then add the following coding in the stylemeeting6.css file.
body{
background-color: green;
}
.container {
width: 32%;
margin: 0 auto;
}
h2{
background-color: skyblue;
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
color: #fff;
}
span{
display: block;
margin-bottom: 20px;
color: red;
}
.success{
display: block;
margin-top: 20px;
margin-bottom: 0;
font-size: 14px;
}
b{
color:green;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 25px;
}
div.main{
background-color: white;
width: 306px;
padding: 10px 50px 30px;
border: 2px solid gray;
font-family: raleway;
margin-top:15px;
}
input[type="text"],input[type="password"],input[type="date"]{
width: 96%;
height: 25px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #53bd84;
font-size: 16px;
}
select{
width: 100%;
height: 50px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #53bd84;
font-size: 16px;
}
input[type=radio]{
margin: 10px 10px 0 10px;
}
label{
color: #53bd84;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
input[type=submit]{
font-size: 16px;
background: linear-gradient(skyblue 5%, #fff 100%);
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
padding: 10px 0;
outline:none;
}
16. Just like the previous meeting, where when you want to add new CSS you
have to enter the following coding in header.php. See red box
17. Next, connect to the database by entering the following coding in
settings/connection.php. The database name is adjusted to the name of
the database you created.
<?php
$databaseHost = 'localhost';
$databaseUsername = 'root';
$databasePassword = '';
$databaseName = 'id_database';
$connection = mysqli_connect($databaseHost,$databaseUsername,
$databasePassword);
$database = mysqli_select_db($connection,$databaseName);
?>
18. Next, to maintain access rights so that only logged in users can access the
dashboard, it is necessary to check the session by entering the following
coding in check_session_before_login.php.
<?php
if (isset($_SESSION["id_member"])) {
header("location:dashboard/index.php");
}
?>
19. Then, to ensure that the logged in user cannot access the login and register
page, it is necessary to check the session by entering the following coding
in check_session_after_login.php.
<?php
if (!isset($_SESSION["id_member"])) {
header("location:../index.php");
}
?>
20. Next, go to the index.php file and enter the following coding.
<?php
session_start();
include_once "settings/check_session_before_login.php";
include('../header.php');
include('../menu.php');
include_once "settings/connection.php";
if(isset($_POST['submit_login'])) {
$username_login=htmlentities((trim($_POST['username_login'])));
$password_login=htmlentities(md5($_POST['password_login']));
$seleksi = mysqli_query($connection, "SELECT
id_member,nama_lengkap FROM member WHERE username =
'$username_login' and password='$password_login'");
$data_member = mysqli_fetch_array($seleksi);
$jumlah_baris = mysqli_num_rows($seleksi);
if ($jumlah_baris == 1){
$_SESSION['id_member'] = $data_member['id_member'];
$_SESSION['nama_lengkap'] = $data_member['nama_lengkap'];
header("location: dashboard/index.php");
}
else
{
echo "
<script language='javascript'>
alert('Sorry, your Username or Password is incorrect..');
document.location='index.php';
</script>";
}
}
?>
<div class="container">
<div class="main">
<form id="formlogin" method="post" action="index.php">
<h2>Login</h2><hr/>
<label>Username :</label>
<input type="text" id="username_login"
name="username_login" required="required">
<label>Password :</label>
<input type="password" id="password_login"
name="password_login" required="required">
<input type="submit" nid="submit_login"
name="submit_login" value="LOGIN">
<center>
<h5>If you don't have an account yet? Please <a
href="register.php">Register</a></h5>
</center>
</form>
</div>
</div>
<?php
include('../footer.php')
?>
21. In the register.php file, enter the following coding.
<?php
session_start();
include_once "settings/check_session_before_login.php";
include('../header.php');
include('../menu.php');
?>
<div class="container">
<div class="main">
<form id="formlogin" method="post"
action="register_member_process.php">
<h2>Register</h2><hr/>
<label>Full Name :</label>
<input type="text" id="nama_lengkap_daftar"
name="nama_lengkap_daftar" required>
<label>Gender :</label>
<select id="gender_daftar" name="gender_daftar"
required>
<option value="1">Man</option>
<option value="2">Woman</option>
</select>
<label>Address :</label><br>
<textarea id="alamat_daftar" name="alamat_daftar"
cols="30" rows="5" required></textarea>
<br>
<label>Date of birth :</label><br>
<input id="tanggal_lahir" type="date"
name="tanggal_lahir" required/>
<label>Username :</label>
<input type="text" id="username_daftar"
name="username_daftar" required>
<label>Password :</label>
<input type="password" id="password_daftar"
name="password_daftar" required>
<input type="submit" id="submit_daftar"
name="submit_daftar" value="REGISTER">
<center>
<h5>If you already have an account? Please <a
href="index.php">Login</a></h5>
</center>
</form>
</div>
<br><br><br><br>
</div>
<?php
include('../footer.php')
?>
22. In the register_member_process.php file, enter the following coding.
<?php
include_once 'settings/connection.php';
$nama_lengkap_daftar = $_POST['nama_lengkap_daftar'];
$gender_daftar = $_POST['gender_daftar'];
$alamat_daftar = $_POST['alamat_daftar'];
$tanggal_lahir = $_POST['tanggal_lahir'];
$username_daftar = $_POST['username_daftar'];
$password_daftar = md5($_POST['password_daftar']);
if($tanggal_lahir <= date('Y-m-d'))
{
if($gender_daftar=="1")
{
$gender = "L";
}
else
{
$gender = "P";
}
$seleksi = mysqli_query($connection, "SELECT id_member FROM
member WHERE username='$username_daftar'");
$jumlah_baris = mysqli_num_rows($seleksi);
if ($jumlah_baris == 0) {
$isi = mysqli_query($connection, "INSERT INTO
member(nama_lengkap, gender, alamat,tanggallahir,username, password)
VALUES('$nama_lengkap_daftar','$gender','$alamat_daftar','$tanggal_lahir','$
username_daftar','$password_daftar')") or die(mysqli_error($connection));
echo "
<script language='javascript'>
alert('Registration is successful, please log in..');
document.location='index.php';
</script>";
}
else {
echo "
<script language='javascript'>
alert('Pregistration failed, member is already registered..');
document.location='daftar.php';
</script>";
}
}
else
{
echo "
<script language='javascript'>
alert('Registration failed, date of birth cannot be later than
today..');
document.location='daftar.php';
</script>";
}
?>
23. In the dashboard/index.php file, enter the following coding.
<?php
session_start();
include_once "../settings/check_session_after_login.php";
include('../../header.php');
include('../../menu.php');
?>
<div class="container">
<h1>Welcome [<?php echo $_SESSION['nama_lengkap'];?>] on the
Members page</h1>
<p>This is an example of a member page</p>
<p>Teks ini hanya bisa dibaca oleh member</p>
<p><a href="logout.php"><strong>LOGOUT</strong></p>
</div>
<?php
include('../../footer.php')
?>
24. Finally, create a logout feature by creating a logout.php file in the
dashboard folder and entering the following coding. See red box.
<?php
session_start();
if (isset($_SESSION["id_member"]))
{
unset($_SESSION['id_member']);
echo "
<script language='javascript'>
document.location='../index.php';
</script>";
}else{
echo "
<script language='javascript'>
alert('Login First Before Entering This Page');
document.location='../index.php';
</script>";
}
?>
25. Next, go to the header.php file to add a new menu assignment 6. Add the
following line of coding. See red box.
26. Try to run the login and register features. Make sure this feature is running
well then proceed to the next step.
27. If the website you created locally is working, then the next step is to try
entering the login and registration features on the web server. The first
stage is uploading all files to the web server.
28. Next, open the web hosting and log in as taught in chapter 2. When you
have logged in, the web hosting control panel display will appear. Scroll to
the Databases section and select MySQL Databases. See red box.
29. Next, the database management display will be displayed. Create a
database by entering a database name and pressing the create database
button. Replace nim with your nim. Example: 12345678_meeting6
30. Make sure the database you created is registered in the list as shown in
the following image. See red box.
31. The next stage is to create a database management user. Fill in the form
and then press create user.
32. After the user has been successfully created, the next step is to connect
the user to the database. Select the name of the user you want to connect
and the name of the database and then press add.
33. Check All Privileges and press make changes.
34. If successful, a pop up will appear in the right corner as shown in the
following image.
35. Next, return to the control panel page and scroll down until you see
phpmyadmin. Press phpmyadmin. See red box.
36. Then you will be directed to the database management display in web
hosting. Click on your database name.
37. Click your database name and then select the SQL tab. See red box.
38. Same as step 6 where a member table will be created via query. However,
this step is carried out on the database on the web hosting. Enter the
query in step 6 into the form provided and then press go.
39. If successful, a display like the following image will appear.
40. Next, edit the settings/connection.php file to adjust it to the user name
and database on the web hosting. Open FileZilla and then edit the
connection.php file
41. Replace the username with the username and web hosting database that
has been created. Then fill in the password according to the password that
was previously created. If so, save the file.
42. Try the login and register features on your web hosting. Make sure the
feature runs well and there are no bugs.
43. Assignment:
Add your phone number, hobbies and parents' names to the
registration form and when registered it will be recorded in the
database.
On the dashboard page using the session, your member profile
information will appear such as gender, address, date of birth,
username, hobbies, phone number and parents' names.
Add the remember me feature by using cookies.
