Coding Class

Quizgum : Project 1-6 : Create a login form

Create a login form

Following the previous lesson, we will create a login form.
In other words, we will also create a login feature. Let's create a login feature.
The login form is not so different from the registration form. By design.
There is an ID field, a password field, a login button, and a sign up button below. If you press the sign up button, you will be directed to the sign up page.


    include "../include/session.php";

    // If you are already logged in
        echo "<script>alert('The wrong approach.');location.href='/myProject/'</script>";
<!doctype html>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.min.js" ></script>
    <script type="text/javascript" src="/myProject/js/mySignInForm.js"></script>
    <link rel="stylesheet" href="/myProject/css/mySignInForm.css" />
<div id="wrap">
    <div id="container">
        <h1 class="title">Welcome</h1>
        <form name="singIn" action="./signIn.php" method="post" onsubmit="return checkSubmit()">
            <div class="line">
                <label for="memberId">ID</label>
                <div class="inputArea">
                    <input type="text" name="memberId" id="memberId" class="memberId" />
            <div class="line">
                <label for="memberPw">password</label>
                <div class="inputArea">
                    <input type="password" name="memberPw" id="memberPw" class="memberPw" />
            <div class="line">
                <input type="submit" value="signIn" class="submit" />
        <h1 class="title"><a href="./signUpForm.php">go to signUp</a></h1>


php image

Next is the source to control whether or not to enter the ID and password.


function checkSubmit(){
    var memberId = $('.memberId');
    var memberPw = $('.memberPw');

    if(memberId.val() == ''){
        alert('input ID.');
        return false;
    if(memberPw.val() == ''){
        alert('input Password.');
        return false;
    return true;


php image

Next, css Source


@charset "utf-8";

/* css reset */

#container{clear:both;width:800px;_border:1px solid #fff;margin:3% auto}
#container h1{clear:both;float:left;width:100%;text-align:center;color:#fff}
#container h1 a{color:#fff;text-decoration:none}
.line{clear:both;float:left;width:100%;border:1px solid #fff;margin-bottom:3%;padding:10px 0}
.line label{float:left;min-width:100px;margin-left:3%;color:#fff}
.line .inputArea{float:left;}
.line .inputArea input{float:left;width:370px;height:30px;margin:0px 0 0 0;padding-left:10px}


php image

This page itself is so plain that you don't need to explain it. Let's move on to the login process.
Then I'll move on.

run & check signIn page
url : http://localhost/myProject/member/signInForm.php

php image