API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 22nd, 2019
108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 8.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Web Praktikum</title>
  5.     <link href="../style.css" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP|Open+Sans|Montserrat|Tomorrow&display=swap" rel="stylesheet">
  7.   <link href="https://fonts.googleapis.com/css?family=Montserrat|Tomorrow&display=swap" rel="stylesheet">
  8.   <style>
  9.  
  10.     .container{
  11.        font-weight:bold;
  12.       text-align:center;
  13.       position:relative;
  14.       left:-10px;
  15.       margin-top:20px;
  16.     }
  17.     img{
  18.       margin-top: 20px;
  19.       position:relative;
  20.       left:35%;
  21.       width:200px;
  22.       height:200px;
  23.       border-radius:100%
  24.     }
  25.     .nama{
  26.       font-family: "Open Sans", sans-serif;
  27.       font-weight:bold;
  28.       line-height:20px;
  29.     }
  30.     .nama span{
  31.       font-family: "Open Sans", sans-serif;
  32.       background-color:cyan;
  33.       border-radius:20%;
  34.       color:white;
  35.       padding: 2px;
  36.       font-size:12px;
  37.     }
  38.     .ttl{
  39.       font-family: 'Noto Sans JP', sans-serif;
  40.       font-style: italic;
  41.     }
  42.     .ttl span{
  43.       font-family: "Open Sans", sans-serif;
  44.       font-size:11px;
  45.       color:gray;
  46.     }
  47.     .jenis {
  48.       font-family: "Open Sans", sans-serif;
  49.     }
  50.     .email{
  51.       font-family: 'Noto Sans JP', sans-serif;
  52.       font-style:italic;
  53.       color:gray;
  54.       font-weight:normal;
  55.     }
  56.     .no{
  57.       font-family: 'Noto Sans JP', sans-serif;
  58.       color:gray;
  59.       font-style:italic;
  60.  
  61.     }
  62.     .alamat {
  63.       font-family: 'Noto Sans JP', sans-serif;
  64.     }
  65.  
  66.     .btn{
  67.        
  68.         background:#1CF3AC;
  69.         width:80px;
  70.         height:40px;
  71.         position:absolute;
  72.         left:53%;
  73.         margin-top:10px;
  74.         border:2px solid white;
  75.         border-radius:10%;
  76.     }
  77.  
  78.     .btn a{
  79.         text-decoration:none;
  80.         color:white;
  81.         font-family: 'Tomorrow', sans-serif;
  82.         font-size:17px;
  83.     }
  84.  
  85.       .overlay{
  86.         width: 0;
  87.         height: 0;
  88.         overflow: hidden;
  89.         position: fixed;
  90.         top:0;
  91.         left: 0;
  92.         background: rgba(0,0,0,0);
  93.         z-index:9999;
  94.         text-align: center;
  95.        
  96.     }
  97.  
  98.  
  99.  
  100.     .overlay:target{
  101.         width: auto;
  102.         height: auto;
  103.         bottom: 0;
  104.         right: 0;
  105.         background: rgba(0,0,0,.6);
  106.         color: black;
  107.         transition-duration:1s;
  108.         display: block;
  109.    
  110.     }
  111. .close {
  112.   position: absolute;
  113.   top: 15px;
  114.   left: 97%;
  115.   color: white;
  116.   text-decoration: none;
  117.   font-size: 30px;
  118.   line-height: 14px;
  119. }
  120.  
  121. .box{
  122.     border: 2px solid black;
  123.     background-color: #4C494D;
  124.     opacity:0.8;
  125.     border-radius:10%;
  126.     width:500px;
  127.     height:550px;
  128.     position:absolute;
  129.     top:50%;
  130.     left:50%;
  131.     transform:translate(-50%,-50%);
  132.     color:#f4f4f4;
  133. }
  134. .box h1{
  135.     text-transform:uppercase;
  136.     font-weight:bold;
  137.     margin-top:20px;
  138.     font-family: 'Montserrat', sans-serif;
  139. }
  140. .text-box{
  141.         width:200px;
  142.         color:#959395;
  143.         overflow:hidden;
  144.         padding:5px 0;
  145.         margin:5px 0;
  146.         position:relative;
  147.         top:50%;
  148.         left:30%;
  149.         margin-top:8px;
  150.        
  151. }
  152.  
  153. .text-box input{
  154.     width:500px;
  155.     backgroune:none;
  156.     color:black;
  157.     font-size:15px;
  158.     margin:0 70px 0 0;
  159.     font-family: 'Tomorrow', sans-serif;
  160.  
  161. }
  162. .text-box label{
  163.     font-family: 'Tomorrow', sans-serif;
  164.     color:white;
  165.     margin-left:2px;
  166.     float:left;
  167.     text-align:center;
  168.     font-size:16px;
  169. }
  170. #submit{
  171.     width:100px;
  172.     background:#A1A0A0;
  173.     border:2px solid white;
  174.     color:black;
  175.     padding: 5px;
  176.     font-size:18px;
  177.     cursor:pointer;
  178.     margin:12px 0;
  179.     font-family: 'Tomorrow', sans-serif;
  180.  
  181. }
  182.  
  183.   </style>
  184.  
  185. </head>
  186. <body>
  187.     <header>  
  188.         <h1>Web Praktikum</h1>
  189.         <p>Kumpulan Tugas Tugas Praktikum</p>
  190.     </header>
  191.  
  192.   <nav>
  193.  
  194.         <ul class="navbar">
  195.             <li><a href="../../Home/index.html">Home</a></li>
  196.             <li><a href="prak.html"class="active">Praktikum</a></li>
  197.             <li><a href="saran.html">Saran</a></li>
  198.         </ul>
  199.  
  200.      <div>
  201.             <ul class="sidebar">
  202.                 <li><a href="../Praktikum 1/prak1.html">Praktikum 1</a></li>
  203.             <li><a href="../Praktikum 2/prak2.html">Praktikum 2</a></li>
  204.             <li><a href="prak.html">Praktikum 3</a></li>
  205.             <li><a href="../Praktikum 4/prak4.html">Praktikum 4</a></li>
  206.             <li><a href="prak.html">Praktikum 5</a></li>
  207.             <li><a href="../Praktikum 6/prak6.html">Praktikum 6</a></li>
  208.             <li><a href="../Praktikum 6/index.php">Praktikum 7</a></li>
  209.             <li><a href="../Praktikum 8/prak8.php">Praktikum 8</a></li>
  210.             <li><a href="../Praktikum 9/prak9.php">Praktikum 9</a></li>
  211.             <li><a href="prak.html"class="active">Praktikum 10</a></li>
  212.           </ul>
  213.      </div>
  214.   </nav>
  215.  
  216.     <content>
  217.         <div class="judul">
  218.           <h2>Biodata</h2>
  219.        </div>
  220.               <hr>
  221.  
  222.       <?php
  223.             //memanggil database
  224.             include "koneksi.php";
  225.  
  226.             $sql = "SELECT * FROM datadiri";
  227.             $result = $koneksi->query($sql);
  228.  
  229.             // mengubah query di database menjadi variabel
  230.             foreach($result as $res){
  231.             $id = $res["id"];
  232.             $nama = $res["nama"];
  233.             $gambar = $res["gambar"];
  234.             $jenis = $res["jenis_kelamin"];
  235.             $ttl = $res["ttl"];
  236.             $alamat = $res["alamat"];
  237.             $no = $res["no_hp"];
  238.             $angkat = $res["angkat"];
  239.             $email = $res["email"];
  240.  
  241.  
  242.             // output untuk php
  243.             echo "<img src='$gambar'>";
  244.             echo "<div class='container'><div class='nama'>$nama, <span>$angkat</span></div>";
  245.             echo "<div class='email'>$email</div>";
  246.             echo "<div class='ttl'>$ttl <span>$jenis</span></div>";
  247.             echo "<div class='alamat'>$alamat</div>";
  248.             echo "<div class='no'>$no</div></div>";        
  249.           }
  250.       ?>
  251.  
  252.      <button class="btn"><a href=#btn>Edit</a></button>
  253.       <div class="overlay" id="btn">
  254.         <?php
  255.         include 'koneksi.php';
  256.         var_dump($_POST);
  257.  
  258.         if (isset($_POST['submit'])){          
  259.             $id = $_POST["id"];
  260.             $nama = $_POST["nama"];
  261.             $gambar = $_POST["gambar"];
  262.             $jenis = $_POST["jenis_kelamin"];
  263.             $ttl = $_POST["ttl"];
  264.             $alamat = $_POST["alamat"];
  265.             $no = $_POST["no_hp"];
  266.             $angkat = $_POST["angkat"];
  267.             $email = $_POST["email"];
  268.  
  269.     $sql = "UPDATE datadiri SET nama ='$nama', gambar ='$gambar',
  270.    jenis_kelamin ='$jenis', alamat ='$alamat', no_hp ='$no',
  271.    angkat ='$angkat',email ='$email' WHERE id = '$id'";
  272.  
  273.     if($koneksi->query($sql) == TRUE){
  274.       echo "<script>
  275.    alert('Succes')
  276.  </script>";
  277.  
  278.     }
  279.     else {
  280.       echo "<script>
  281.    alert('Data gagal dirubah')
  282.  </script>";
  283.     }
  284. }
  285.     ?>
  286.  
  287.  
  288.         <a href="#" class="close">X</a>
  289.         <div class="box">
  290.             <h1>Edit Profile</h1>
  291.         <form method="post" action="<?= $_SERVER['PHP_SELF'];?>">
  292.           <div class="text-box">
  293.           <input type="text" name="id" value="<?= $id;?>">
  294.         </div>
  295.         <div class="text-box">
  296.        
  297.         <label for="nama">Nama</label>
  298.         <input type="text" name="nama" value="<?= $nama;?>">
  299.         </div>
  300.  
  301.         <div class="text-box">
  302.         <label for="jenis_kelamin">Jenis Kelamin</label>
  303.         <input type="text" name="jenis_kelamin"id="jenis_kelamin" value="<?= $jenis;?>">
  304.         </div>
  305.  
  306.         <div class="text-box">
  307.         <label for="ttl">Tempat Tanggal Lahir</label>
  308.         <input type="text" name="ttl"id="ttl" value="<?= $ttl;?>" aria-describedy="namaUser">
  309.         </div>
  310.  
  311.         <div class="text-box">
  312.         <label for="alamat">Alamat</label>
  313.         <input type="text" name="alamat"id="alamat" value="<?= $alamat;?>" aria-describedy="namaUser">
  314.         </div>
  315.  
  316.         <div class="text-box">
  317.         <label for="no_hp">No HP</label>
  318.         <input type="text" name="no_hp"id="no_hp" value="<?= $no;?>" aria-describedy="namaUser">
  319.         </div>
  320.  
  321.         <div class="text-box">
  322.         <label for="angkat">Angkatan</label>
  323.         <input type="text" name="angkat"id="angkat" value="<?= $angkat;?>" aria-describedy="namaUser">
  324.         </div>
  325.  
  326.         <div class="text-box">
  327.         <label for="email">Email</label>
  328.         <input type="text" name="email"id="email" value="<?= $email;?>" aria-describedy="namaUser">
  329.         </div>
  330.  
  331.         <input type="submit" name="submit" id="submit">
  332.       </form>
  333.   </div>
  334.       </div>
  335.  
  336.     </content>
  337.  
  338.  <footer>
  339.     <div>Copyright @ 2019 Created by Gusti Muhammad Aulia Nur Sulthan </div>
  340.   </footer>
  341.    
  342. </body>
  343. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!