Hướng dẫn tạo trang đăng ký với PHP và MySQL

Bài viết này mình sẽ hướng dẫn các bạn tạo trang đăng ký mà cụ thể ở ví dụ này là đăng ký thông tin (họ tên, mail, mật khẩu, ngày sinh, giới tính) với PHP và MySQL. Bắt đầu nhé…

Tạo form đăng ký

Ở đây mình sẽ sử dụng Twitter bootstrap Framework để tiết kiệm thời gian cho việc tạo giao diện. Bạn có thể dễ dàng tải miễn phí tại: www.getbootstrap.com. Sau khi tải về bạn tiến hành giải nén sẽ thu được một thư mục gốc (là số kèm phiên bản của framework) chứa 3 thư mục con có cấu trúc như sau:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

Bạn hãy đổi tên thư mục bootstrap (thư mục gốc có thể kèm theo số phiên bản của framework) thành regtuts và chép nó vào thư mục chạy web.

Sau đó bạn tạo thêm tập tin registration.php với nội dung như sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">
    <link href="" rel="shortcut icon">
    <title>Registration form</title>
<!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="well">
            <form action="register.php" class="form-horizontal well" method="post">
            <fieldset>
              <legend>Register Now</legend>
              <h4>It's free and always will be.</h4>
                 <div class="row"> 
                    <div class="col-xs-8">
                    <div class="form-group">
                    <div class="rows">
                        <div class="col-md-8">
                            <div class="col-lg-6">
                                <input class="form-control input-lg" id="fName" name="fName" placeholder="First Name" type="text">
                            </div> 
                            <div class="col-lg-6">
                                <input class="form-control input-lg" id="lName" name="lName" placeholder="Last Name" type="text">
                            </div>
                        </div>
                    </div>
                </div> 
                <div class="form-group">
                    <div class="rows">
                        <div class="col-md-8">
                            <div class="col-lg-12">
                                <input class="form-control input-lg" id="email" name="email" placeholder="Your Email" type="text">
                            </div>
                        </div>
                    </div>
                </div> 
                <div class="form-group">
                    <div class="rows">
                        <div class="col-md-8">
                            <div class="col-lg-12">
                                <input class="form-control input-lg" id="reemail" name="reemail" placeholder="Re-enter Email" type="text">
                            </div>
                        </div>
                    </div>
                </div> 
                <div class="form-group">
                    <div class="rows">
                        <div class="col-md-8">
                            <div class="col-lg-12">
                                <input class="form-control input-lg" id="password" name="password" placeholder="New Password" type=
                                "password">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="rows">
                        <div class="col-md-8">
                            <h4>
                            <div class="col-md-3">
                                <label class="col-lg-4 control-label">Birthday</label>
                            </div> 
                            <div class="col-lg-3">
                                <select class="form-control input-sm" name="month">
                                    <option>Month</option>
                                    <?php
                                        $m = array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
                                        foreach ($m as $month) {
                                            echo '<option value='.$month.'>'.$month.'</option>';
                                        }
                                    ?>
                                </select>
                            </div> 
                            <div class="col-lg-3">
                                <select class="form-control input-sm" name="day">
                                    <option>Day</option>
                                <?php 
                                    $d = range(31, 1);
                                    foreach ($d as $day) {
                                        echo '<option value='.$day.'>'.$day.'</option>';
                                    } 
                                ?> 
                                </select>
                            </div> 
                            <div class="col-lg-3">
                                <select class="form-control input-sm" name="year">
                                    <option>Year</option>
                                <?php 
                                    $years = range(2010, 1900);
                                    foreach ($years as $yr) {
                                        echo '<option value='.$yr.'>'.$yr.'</option>';
                                    } 
                                ?> 
                                </select>
                            </div>
                            </h4>
                        </div>
                    </div>
                </div> 
                <div class="form-group">
                    <div class="rows">
                        <div class="col-md-4">
                            <div class="col-lg-6">
                                <div class="radio">
                                    <label><input checked id="optionsRadios1" name="optionsRadios" type="radio" value="Female">Female</label>
                                </div>
                            </div> 
                            <div class="col-lg-6">
                                <div class="radio">
                                    <label><input id="optionsRadios2" name="optionsRadios" type="radio" value="Male"> Male</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
                <div class="form-group">
                    <div class="rows">
                        <div class="col-md-8">
                            <div class="col-lg-12">
                                <button class="btn btn-success btn-lg" type="submit">Register</button>
                            </div>
                        </div>
                    </div>
                </div> 
                </div> 
                </div>  
                </fieldset>
            </form>
        </div>
    </div><!-- container -->
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

<!DOCTYPE html>

<head>

<title>Registration form</title>

</head>

<body>

<legend>Register Now</legend>

<h4>It's free and always will be.</h4>

</div>

</div>

</div>

</div>

<input class="form-control input-lg" id="password" name="password" placeholder="New Password" type=

"password">

</div>

<h4>

<label class="col-lg-4 control-label">Birthday</label>

</div>

<option>Month</option>

<?php

$m = array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");

foreach ($m as $month) {

echo '<option value='.$month.'>'.$month.'</option>';

}

</select>

</div>

<?php

$d = range(31, 1);

foreach ($d as $day) {

echo '<option value='.$day.'>'.$day.'</option>';

}

</select>

</div>

<?php

$years = range(2010, 1900);

foreach ($years as $yr) {

echo '<option value='.$yr.'>'.$yr.'</option>';

}

</select>

</div>

</h4>

</div>

<label><input checked id="optionsRadios1" name="optionsRadios" type="radio" value="Female">Female</label>

</div>

</div>

<button class="btn btn-success btn-lg" type="submit">Register</button>

</div>

</fieldset>

</form>

</div>

</div>

</body>

</html>

Và đây là kết quả thu được

Tạo cơ sở dữ liệu

Bạn tạo cơ sở dữ liệu có tên studentdb. Bạn chạy tiếp đoạn mã SQL dưới đây trong cơ sở dữ liệu vừa tạo để tạo các bảng.

CREATE TABLE IF NOT EXISTS `tblmember` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`fName` varchar(30) NOT NULL,
`lName` varchar(30) NOT NULL,
`email` varchar(50) NOT NULL,
`password` varchar(60) NOT NULL,
`birthdate` text NOT NULL,
`gender` varchar(20) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

CREATE TABLE IF NOT EXISTS `tblmember` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`fName` varchar(30) NOT NULL,

`lName` varchar(30) NOT NULL,

`email` varchar(50) NOT NULL,

`password` varchar(60) NOT NULL,

`birthdate` text NOT NULL,

`gender` varchar(20) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

Tạo trang xử lý

Bạn tạo một tập tin mới với tên register.php (trong thư mục regtuts) với nội dung như sau:

<?php
//set up mysql connection
mysql_connect("localhost", "root", "") or die(mysql_error());
//select database
mysql_select_db("studentdb") or die(mysql_error()); 
$fName     = $_POST['fName'];
$lName     = $_POST['lName'];
$email     = $_POST['email'];
$reemail   = $_POST['reemail'];
$password  = sha1($_POST['password']);
$month     = $_POST['month'];
$day       = $_POST['day'];
$year      = $_POST['year'];
$gender    = $_POST['optionsRadios'];
$birthdate = $year . '-' . $month . '-' . $day;
$query = "INSERT INTO tblmember(id, fName, lName, email, password, birthdate, gender) 
VALUES (NULL, '{$fName}', '{$lName}', '{$email}', '{$password}', '{$birthdate}', '{$gender}')"; 
if (mysql_query($query)) {
echo "<script type=\"text/javascript\">
alert(\"New member added successfully.\");
window.location = \"registration.php\"
</script>";
} else
die("Failed: " . mysql_error());
?>

<?php

//set up mysql connection

mysql_connect("localhost", "root", "") or die(mysql_error());

//select database

mysql_select_db("studentdb") or die(mysql_error());

$fName = $_POST['fName'];

$lName = $_POST['lName'];

$email = $_POST['email'];

$reemail = $_POST['reemail'];

$password = sha1($_POST['password']);

$month = $_POST['month'];

$day = $_POST['day'];

$year = $_POST['year'];

$gender = $_POST['optionsRadios'];

$birthdate = $year . '-' . $month . '-' . $day;

$query = "INSERT INTO tblmember(id, fName, lName, email, password, birthdate, gender)

VALUES (NULL, '{$fName}', '{$lName}', '{$email}', '{$password}', '{$birthdate}', '{$gender}')";

if (mysql_query($query)) {

echo "<script type=\"text/javascript\">

alert(\"New member added successfully.\");

window.location = \"registration.php\"

</script>";

} else

die("Failed: " . mysql_error());

Vậy là xong rồi đó. Giờ bạn truy cập vào tập tin registration.php điền thông tin và submit thử.

Các bạn có thể tải mã nguồn mẫu tại:

Box: http://tinyurl.com/jlj257c
Mediafire: http://tinyurl.com/z5vnbwt

Chúc các bạn thành công

Huỳnh Mai Anh Kiệt

- Advertisement -

Hướng dẫn tạo trang đăng ký với PHP và MySQL

BÌNH LUẬN Hủy trả lời

BÀI VIẾT MỚI

Hướng Dẫn Cách Đăng Ký Trang Web Bán Hàng Trên Nền Tảng Shopify

9 Ứng Dụng Hỗ Trợ Tích Hợp Cổng Thanh Toán Của Việt Nam Với Shopify

Vừa được NCSC vinh danh vì đã phát hiện lỗ hổng bảo mật

Kể chuyện máy chủ Hura Apps gặp sự cố

Cảnh báo lỗ hổng bảo mật khi sử dụng CKFinder

BẠN XEM CHƯA

Tạo chú thích cho ảnh dễ dàng với Skitch

Tối ưu các bảng trong tất cả cơ sở dữ liệu MySQL từ cửa sổ dòng lệnh

Tin tặc tìm ra 2 cách để hack tài khoản Instagram

Vượt qua sự khó chịu mã xác nhận của CloudFlare với CloudHole

Pornhub ra mắt dịch vụ VPN miễn phí và không giới hạn.

BẠN XEM CHƯA

Vô tình làm lính đánh thuê cho một dự án tham gia trong Shark Tank

Vô hiệu hóa thẻ a liên kết

Chụp màn hình tuỳ chỉnh trên Windows 10

BÀI VIẾT XEM NHIỀU

Làm sao biết ai đó đang cố tình né bạn trên Facebook

Cách đăng bài hàng loạt lên nhiều group trên Facebook

Khôi phục ảnh bị nhòe vói SmartDeblur

DANH MỤC

THÔNG TIN

THEO DÕI CHÚNG TÔI

Hướng dẫn tạo trang đăng ký với PHP và MySQL

BÀI VIẾT LIÊN QUAN

BÌNH LUẬN Hủy trả lời

BÀI VIẾT MỚI

BẠN XEM CHƯA

BẠN XEM CHƯA

BÀI VIẾT XEM NHIỀU

DANH MỤC

THÔNG TIN

THEO DÕI CHÚNG TÔI