.png)
Membuat Form pendaftaran multipart seperti di facebook / twitter
Jika kita mendaftar di facebook / twitter kita disuguhkan dengan beberapa part misalnya part pertama disuruh mengisi nama dan email kemudian part kedua disuruh mengisi password dan data lengkap kemudian pada part ke tiga disuruh mengupload foto profil dan part ke empat disuruh menambahkan beberapa teman baru pendaftaran diselesaikan.
Nah bagaimanakah caranya untuk membuat beberapa part seperti berikut caranya yaitu pada part pertama kita daftarkan dulu sessionnya kemudian dipart ke dua dan seterusnya gunakan session yang udah didaftarkan tadi. berikut ini contohnya:
pertama buat dulu form pendaftaran biasa:
<form method="post" class="container" action="content.php?page=simpankomentar"><label><b>Nama Depan</b></label><input type="text" placeholder="Nama Depan" name="nama_depan" required> <label><b>Nama Belakang</b></label><input type="text" placeholder="Nama Belakang" name="nama_belakang" required> <label><b>Email</b></label><input type="text" placeholder="Enter Email" name="email" required><img src="captcha.php"><br /><label for="captcha">(Masukkan 6 kode diatas)</label><br /><input type="text" name="kode" placeholder="Masukan Kode Captcha disini" maxlength="6" required><br /> <input name="kirim" type="submit" value="Kirim" class="pager-btn">Dengan mengklik kirim anda dianggap menyetujui <a href="http://support.giviews.id">ketentuan</a> dan <a href="http://support.giviews.id/privacy.php">kebijakan</a> yang berlaku di giviews </form>
ini kode prosesnya:
<?php error_reporting(0); session_start(); include "config.php"; include "library.php"; $id_user=""; $nama_depan=trim($_POST['nama_depan']); $nama_belakang=trim($_POST['nama_belakang']); $email=trim($_POST['email']); $username=""; $no_telpon=""; $kelamin=""; $tanggal_lahir=""; $agama=""; $photo=""; $background=""; $status=""; $skils=""; $pendidikan=""; $deskripsi=""; $online=""; if (empty($nama_depan)){ echo "Anda belum mengisikan NAMA DEPAN<br /> <a href=javascript:history.go(-1)><b>Ulangi Lagi</b>"; } elseif (empty($nama_belakang)){ echo "Anda belum mengisikan NAMA BELAKANG<br /> <a href=javascript:history.go(-1)><b>Ulangi Lagi</b>"; } elseif (empty($email)){ echo "Anda belum mengisikan EMAIL<br /> <a href=javascript:history.go(-1)><b>Ulangi Lagi</b>"; } else{ function antiinjection($data){ $filter_sql = mysql_real_escape_string(stripslashes(strip_tags(htmlspecialchars($data,ENT_QUOTES)))); return $filter_sql; } $nama_depan = antiinjection($_POST['nama_depan']); $nama_belakang = antiinjection($_POST['nama_belakang']); $email = antiinjection($_POST['email']); if(!empty($_POST['kode'])){ if($_POST['kode']==$_SESSION['captcha_session']){ $sql = mysql_query("INSERT INTO tbl_user(id_user,nama_depan,nama_belakang,email,username,no_telpon,password,kelamin,tanggal_lahir,agama,photo,background,status,skils,pendidikan,deskripsi,online) VALUES('','$nama_depan','$nama_belakang','$email','','','','','','','','','','','','','')"); if($sql){ $query=mysql_query("select * from tbl_user where email='$email'"); $cek=mysql_num_rows($query); $row=mysql_fetch_array($query); $id_user=$row['id_user']; $nama_depan=$row['nama_depan']; $_SESSION['id_user']=$id_user; $_SESSION['nama_depan']=$nama_depan; mysql_query("update tbl_user set online='yes' where id_user='$id_user'"); echo "Jika anda tidak dialihkan secara otomatis klik <a href=\"multipart.php\">disini...</a>"; ?><script language="javascript">document.location.href="multipart.php?page=part2"</script><?php}else{echo mysql_query();}}else{echo "Kode yang Anda masukkan tidak cocok<br /><a href=javascript:history.go(-1)><b>Ulangi Lagi</b></a>";}}else{echo "Anda belum memasukkan kode<br /><a href=javascript:history.go(-1)><b>Ulangi Lagi</b></a>";}}?>
lalubuat halaman multipart.php
<?php session_start(); if(isset($_SESSION['id_user'])){ include "config.php"; if(isset($_GET['id_user'])){ $id_user=$_GET['id_user']; } if(empty($_GET['id_user'])){ $id_user=$_SESSION['id_user']; } $id_log=$_SESSION['id_user']; $query_log=mysql_fetch_array(mysql_query("select * from tbl_user where id_user='$id_log'")); $nama_depan_log=$query_log['nama_depan']; $id_user_log=$query_log['id_user']; $query=mysql_fetch_array(mysql_query("select * from tbl_user where id_user='$id_user'")); $nama_depan=$query['nama_depan']; $nama_belakang=$query['nama_belakang']; $photo=$query['photo']; ?> <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Giviews | <?php echo ucwords($nama_depan);?></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="<?php echo ucwords($nama_depan);?> Telah bergabung dengan giviews, bergabunglah dengan giviews untuk berinteraksi dengannya"> <meta name="keywords" content="Giviews,NewsCKI,Login,Mendaftar,Juanas Smith" name='KEYWORDS'/> <meta name="author" content="google90c551d600980f74.html"> <meta content='Indonesia' name='geo.placename'/> <meta name="language" content="id" /> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="css/password-strength-checker.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/password-strength-checker.js"></script> <script src="bootstrap/js/jQuery.js"></script> <script src="bootstrap/js/bootstrap.js"></script> <script src="ajax.js"></script> <script src="ajaxku.js"></script> <link rel="shortcut icon" href="logo mobile.png" type="image/x-icon"> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <!-- Bootstrap 3.3.5 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- Font Awesome --> <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <!-- Ionicons --> <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <!-- Theme style --> <link rel="stylesheet" href="dist/css/AdminLTE.min.css"> <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. --> <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css"> <!-- iCheck --> <link rel="stylesheet" href="plugins/iCheck/flat/blue.css"> <!-- Morris chart --> <link rel="stylesheet" href="plugins/morris/morris.css"> <!-- style --> <link rel="stylesheet" href="images/style.css"> <!-- jvectormap --> <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css"> <!-- Date Picker --> <link rel="stylesheet" href="plugins/datepicker/datepicker3.css"> <!-- Daterange picker --> <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css"> <!-- bootstrap wysihtml5 - text editor --> <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"> <link rel="stylesheet" type="text/css" href="themes/bootstrap/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.easyui.min.js"></script> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <script> var AdminLTEOptions = { //Enable sidebar expand on hover effect for sidebar mini //This option is forced to true if both the fixed layout and sidebar mini //are used together sidebarExpandOnHover: true, //BoxRefresh Plugin enableBoxRefresh: true, //Bootstrap.js tooltip enableBSToppltip: true }; </script> <script src="dist/js/app.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> $(document).ajaxStart(function() { Pace.restart(); }); </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style> #panel, #flip { padding: 10px; text-align: center; background-color: tranparent; border: none; } #panel { padding: 1px; display: none; background-color: white; } </style></head><body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <header class="main-header"> <nav class="navbar navbar-static-top" role="navigation"> <div class="col-xs-4"><a href="home.php"><img src="images/logo.png" width="157" height="40" style="margin:16px 16px;"></a></div> <!-- Navbar Right Menu --> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> </ul> <?php $query=mysql_fetch_array(mysql_query("select * from tbl_user where id_user='$id_user'")); $nama_depan=$query['nama_depan']; $nama_belakang=$query['nama_belakang']; $email=$query['email']; $no_telpon=$query['no_telpon']; $username=$query['username']; $kelamin=$query['kelamin']; $tanggal=$query['tanggal_lahir']; $agama=$query['agama']; $status=$query['status']; $alamat=$query['alamat']; $pekerjaan=$query['pekerjaan']; $pendidikan=$query['pendidikan']; $skils=$query['skils']; $deskripsi=$query['deskripsi']; $pass=$query['password']; $foto=$query['photo']; $background=$query['background']; ?> <span><a class="btn btn-success" href="home.php" style="margin:16px 16px;">Lewati</a></span> </div> </li> </ul> </li></ul></div> </nav> </header><div class="row"><nav style="text-align: center;"> <ul class="pagination"> <li> <a href="?page=part2" aria-label="Previous"> <span aria-hidden="true">Part 2</span> </a> </li> <li><a href="?page=upload_profile">Part 3</a></li> <li> <a href="?page=part3" aria-label="Next"> <span aria-hidden="true">Part 4</span> </a> </li> </ul></nav></div><div id="page"><?php if(isset($_GET['page'])){ $page=htmlentities($_GET['page']); }else{ $page="part2"; } $file="$page.php"; $cek=strlen($page); if($cek>30 || !file_exists($file) || empty($page)){ include ("part2.php"); }else{ include ($file); } ?></div> </div> <?php } include "footer.php"; ?>
selanjutnya buat part2.php isinya sebagai berikut:
<div class="row"><div class="container"> <h3 class="profile-username text-center">Part 2 dari 4<br><br><?php echo ' Hi '. $nama_depan.' '.$nama_belakang ;?> Selamat datang di giviews</h3><br> <div class="col-md-2"></div> <div class="col-md-8"> <div class="box box-primary"> <div class="box-body box-profile"> <h3 class="box-title">Lengkapi Pendaftaran Anda</h3> <form action="?page=simpan_part2" enctype="multipart/form-data" method="post" name="postform"> <?php include('cek_session.php'); ?> <?php $query=mysql_fetch_array(mysql_query("select * from tbl_user where id_user='$id_user'")); $nama_depan=addslashes(htmlentities($query['nama_depan'])); $nama_belakang=addslashes(htmlentities($query['nama_belakang'])); $email=addslashes(htmlentities($query['email'])); ?> <input type="hidden" name="id_user" value="<?php echo $id_user;?>" /> <input type="hidden" name="pass" value="<?php echo $pass;?>" /> <input type="hidden" name="foto" value="<?php echo $foto?>" /> <div class="form-group"> <label class="control-label col-xs-3" for="inputEmail">Username:</label> <div class="col-xs-9"> <input type="text" class="form-control" name="username" placeholder="Username" value="<?php echo $username; ?>" size="30"/><br> </div> </div> <div class="form-group"> <label class="control-label col-xs-3" for="inputEmail">Password Baru</label> <div class="col-xs-9"> <input class="pass-word-field form-control" type="password" name="password" id="pass-word" placeholder="password Baru" required/> <input class="pass-word-field form-control" style="display:none;" id="pass-word-two" type="text" /> </div> <div class="form-group"> <label class="control-label col-xs-3" for="inputEmail">Ulangi Password :</label> <div class="col-xs-9"> <input class="verify-password-field form-control" type="password" name="password2" id="verify-pass-word" placeholder="Ulangi Password" required/> <input class="verify-password-field form-control" style="display:none;" id="verify-pass-word-two" type="text" /> </div> <div class="col-xs-9" style="float:right;"><span>Tampilkan Password:</span><input type="checkbox" id="show-hide-passwords"></div><br clear="all"> <div class="col-xs-12" id="pass-status"></div> </div> <div class="form-group"> <label class="control-label col-xs-3" for="inputEmail">Jenis Kelamin:</label> <div class="col-xs-9"> <select name="kelamin" class="form-control" style="width:auto;"> <option value="0">--Silahkan dipilih-- <option value="pria" <?php if($kelamin=='pria'){ echo "selected='selected'";} ?>>Pria <option value="wanita" <?php if($kelamin=='wanita'){ echo "selected='selected'";} ?>>Wanita </select><br> </div> </div> <div class="form-group"> <label class="control-label col-xs-3">Tanggal Lahir :</label> <div class="col-xs-9"> <?php //membuat array bulan //$bulan=array("Januari" ,"Februari", " Maret" ,"April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"); if(strlen($tanggal)==9){ $hari1=substr($tanggal,0,1); $bulan1=substr($tanggal,2,2); $tahun1=substr($tanggal,5,4); }else{ $hari1=substr($tanggal,0,2); $bulan1=substr($tanggal,3,2); $tahun1=substr($tanggal,6,4); } //membuat combo box hari echo "<select class=\"col-xs-4 form-control\" style=\"width:auto;\" name='hari'>"; $hari=1; echo "<option value='0'>Tanggal</option>"; while($hari<=31) { ?> <option value="<?php echo $hari?>" <?php if($hari==$hari1){ echo 'selected=selected'; } ?> ><?php echo $hari; ?></option> <?php $hari++; } echo '</select>'; //membuat combo box bulan echo '<select class="col-xs-4 form-control" style="width:auto;" name=bulan> '; ?> <option value=0>Bulan</option> <option value=01 <?php if($bulan1=='01'){ echo 'selected=selected'; } ?>>01</option> <option value=02 <?php if($bulan1=='02'){ echo 'selected=selected'; } ?>>02</option> <option value=03 <?php if($bulan1=='03'){ echo 'selected=selected'; } ?>>03</option> <option value=04 <?php if($bulan1=='04'){ echo 'selected=selected'; } ?>>04</option> <option value=05 <?php if($bulan1=='05'){ echo 'selected=selected'; } ?>>05</option> <option value=06 <?php if($bulan1=='06'){ echo 'selected=selected'; } ?>>06</option> <option value=07 <?php if($bulan1=='07'){ echo 'selected=selected'; } ?>>07</option><option value=08 <?php if($bulan1=='08'){ echo 'selected=selected'; } ?>>08</option><option value=09 <?php if($bulan1=='09'){ echo 'selected=selected'; } ?>>09</option><option value=10 <?php if($bulan1=='10'){ echo 'selected=selected'; } ?>>10</option><option value=11 <?php if($bulan1=='11'){ echo 'selected=selected'; } ?>>11</option><option value=12 <?php if($bulan1=='12'){ echo 'selected=selected'; } ?>>12</option> <?php echo '</select>'; //membuat combo box tahun $thn=date('Y'); echo "<select class=\"col-xs-4 form-control\" style=\"width:auto;\" name=tahun>"; echo "<option value=0>Tahun</option>"; for($tahun=2011; $tahun>=1945; $tahun--){ ?><option value="<?php echo $tahun;?>" <?php if($tahun==$tahun1){ echo 'selected=selected'; } ?>><?php echo $tahun; ?></option><?php } echo '</option></select></div><br>'; ?> </div><div class="col-xs-12"><br></div><div class="form-group"><label class="control-label col-xs-3" for="inputEmail">Agama:</label><div class="col-xs-9"> <select name="agama" class="form-control" style="width:auto;"> <option value="0">--Silahkan dipilih-- <option value="islam" <?php if($agama=='islam'){ echo "selected='selected'";} ?>>Islam <option value="katolik" <?php if($agama=='katolik'){ echo "selected='selected'";} ?>>Katolik <option value="protestan" <?php if($agama=='protestan'){ echo "selected='selected'";} ?>>Protestan <option value="hindu" <?php if($agama=='hindu'){ echo "selected='selected'";} ?>>Hindu <option value="budha" <?php if($agama=='budha'){ echo "selected='selected'";} ?>>Budha </select><br></div></div><div class="form-group"><label class="control-label col-xs-3" for="inputEmail">Status:</label><div class="col-xs-9"> <select name="status" class="form-control" style="width:auto;"> <option value="0">--Silahkan dipilih-- <option value="lajang" <?php if($status=='lajang'){ echo "selected='selected'";} ?>>Lajang <option value="pacaran" <?php if($status=='pacaran'){ echo "selected='selected'";} ?>>Pacaran <option value="menikah" <?php if($status=='menikah'){ echo "selected='selected'";} ?>>Menikah <option value="lain-lain" <?php if($status=='lain-lain'){ echo "selected='selected'";} ?>>Lain-lain </select><br></div></div><div class="form-group"><label class="control-label col-xs-3" for="inputEmail">Alamat:</label><div class="col-xs-9"> <textarea name="alamat" placeholder="Alamat" class="form-control" value="<?php echo $alamat;?>"></textarea><br></div></div><div class="form-group"><label class="control-label col-xs-3" for="inputEmail">Pertanyaan Keamanan:</label><div class="col-xs-9"> <select name="pertanyaan" class="form-control" style="width:auto;"> <option value="0">--Silahkan dipilih-- <option value="Di kota manakah kamu dilahirkan?" <?php if($pertanyaan=='Di kota manakah kamu dilahirkan?'){ echo "selected='selected'";} ?>>Di kota manakah kamu dilahirkan? <option value="Siapakah nama ibu Kandugmu?" <?php if($pertanyaan=='Siapakah nama ibu Kandugmu?'){ echo "selected='selected'";} ?>>Siapakah nama ibu Kandugmu? <option value="Apa warna kesukaanmu?" <?php if($pertanyaan=='Apa warna kesukaan mu?'){ echo "selected='selected'";} ?>>Apa warna kesukaanmu? <option value="Siapa tokoh kartun favoritmu?" <?php if($pertanyaan=='Siapa tokoh kartun favoritmu?'){ echo "selected='selected'";} ?>>Siapa tokoh kartun favoritmu? <option value="Siapakah nama sahabatmu?" <?php if($pertanyaan=='Siapakah nama sahabatmu?'){ echo "selected='selected'";} ?>>Siapakah nama sahabatmu? <option value="Mobil apa yang kamu sukai?" <?php if($pertanyaan=='Mobil apa yang kamu sukai?'){ echo "selected='selected'";} ?>>Mobil Apa yang kamu sukai? <option value="Apakah kamu akan mengunjungi laman ini lagi?" <?php if($pertanyaan=='Apakah kamu akan mengunjungi laman ini lagi?'){ echo "selected='selected'";} ?>>Apakah kamu akan mengunjungi laman ini lagi? <option value="Motor apa yang kamu sukai?" <?php if($pertanyaan=='Motor apa yang kamu sukai?'){ echo "selected='selected'";} ?>>Motor apa yang kamu sukai? </select><br></div></div><div class="form-group"><label class="control-label col-xs-3" for="inputEmail">Jawaban Anda:</label><div class="col-xs-9"> <input type="text" class="form-control" name="jawab" placeholder="Jawab disini" required/><br></div></div><div class="form-group"><div class="col-xs-offset-3 col-xs-6"> <label class="checkbox-inline"> <input type="checkbox" value="Setuju" required> Saya Setuju dengan <a href="http://support.giviews.id">Kebijakan dan Ketentuan</a> yang berlaku. </label></div><div class="col-xs-3"> <input type="submit" class="btn btn-primary" value="Simpan" name="kirim" /></div></div> </form> </div> </div>
lalu buat halaman simpan_part2.php
<div class="col-md-8"><div class="box box-primary"> <div class="box-body box-profile"> <?php include('cek_session.php'); ?> <?php $id_user=$_POST['id_user']; $password=md5($_POST['password']); $password2=md5($_POST['password2']); $username=$_POST['username']; $kelamin=$_POST['kelamin']; $hari=$_POST['hari']; $bulan=$_POST['bulan']; $tahun=$_POST['tahun']; $tanggal=$hari.'-'.$bulan.'-'.$tahun; $tgl=date("F jS Y"); $agama=$_POST['agama']; $status=$_POST['status']; $alamat=$_POST['alamat']; $pertanyaan=$_POST['pertanyaan']; $jawaban=$_POST['jawab']; if($password == $password2) { $query=mysql_query("update tbl_user set no_telpon='$no_telpon',username='$username',kelamin='$kelamin', tanggal_lahir='$tanggal',tanggal_mendaftar='$tgl',agama='$agama',status='$status',alamat='$alamat',password='$password',pertanyaan='$pertanyaan',jawaban='$jawaban' where id_user='$id_user'"); if($query){ ?><script language="javascript">document.location.href="multipart.php?page=upload_profile"</script><?php }else{ echo mysql_query(); } }else{ echo "password yang anda masukan tidak sama!"; } ?> </div></div>
dari part2 bisa anda arahkan lagi ke part3 dan seterusnya kalau tidak anda bisa langsung mengarahkanya ke halaman home.php ok sekianlah tutorial cara membuat pendaftaran multipart dengan php semoga bermanfaat
It's appropriate time to make some plans forr thee long run and it is time to be happy.
BalasHapusI have read thiis post and iff I may I dsire to counsel yoou few
attention-grabbing issues or suggestions. Maybe you can write subsequent articles regarding
this article. I desire to read more issues approximately it!
Admiring the commitment you put into your website and detailed information you offer.
BalasHapusIt's nice to come across a blog every once in a while
that isn't the same out of date rehashed information. Fantastic read!
I've bookmarked your site and I'm adding your RSS feeds to my
Google account.