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

Binance Launchpad có dễ… húp như bạn tưởng

10 Công Cụ Có Thể Thay Thế ChatGPT

Hướng Dẫn Đăng Ký Nhận Mã Giảm Giá Highland Coffee

Quà cuối năm 2022 từ Shopify

Nhận quà từ đối tác công nghệ Recharge

BẠN XEM CHƯA

Ngăn người dùng thực hiện thao tác in nội dung trang web với Javascript

Copy cả công thức trong Excel

Tiết kiệm lưu lượng 3G, 4G trên thiết bị chạy Android

Upload ảnh lên Facebook dễ dàng với Easy Photo Facebook Uploader

Firefox 46 có gì mới

BẠN XEM CHƯA

11 mẹo xếp đồ du lịch được nhiều và gọn nhất

Bài thuốc chữa bệnh vảy nến

Rò rỉ thông tin về Samsung Galaxy A90

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