Selasa, 23 Oktober 2018

Mengetahui tentang tag-tag HTML5


STRUKTUR HTML 

HTML5 adalah versi terbaru dari HTML yang statusnya sudah direkomendasikan oleh W3C walau belum 100% sempurna, tapi beberapa sudah bisa dipakai.
HTML5 sangat powerful, sampai-sampai almarhum Steve Jobs pernah mengatakan HTML5 sebagai pengganti Flash, perkataan Steve Jobs tersebut sedikit banyak mempengaruhi para programmer yang ingin mengembangkan flash. Tentunya membuat sebagian dari mereka berpindah ke HTML5.  Steve Jobs juga mengatakan kalau Flash itu berat dan boros baterai. Dan Apple tidak akan mensupport Flash lagi
TAG-TAG HTML
1.Elemen : semua yang terdapat diantara start tag sampai end tag contoh Star tag <html></html>,<hrad></head>,dll Contoh dalam syntax
<p> Ini adalah sebuah paragraf </p>
Element tidak hanya berisi text, namun juga bisa tag lain.<p> Ini adalah sebuah <em>paragraf</em> </p>
Dari contoh diatas,<p> Ini adalah sebuah <em>paragraf</em> </p> merupakan elemen p. Dalam pembahasan atau tutorial tentang HTML, tidak jarang istilah “tag” dan “element” saling dipertukarkan.
2. Atribut : informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text, dll contoh tang <body></body> memiliki Atribut (Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth).
3. Heading : atau lebih tepatnya TAG Heading merupakan TAG khusus yang disediakan oleh HTML untuk membuat sebuah judul pada teks dalam sebuah halaman web. TAG Heading terdiri dari 6 tingkatan dan tiap tingkatan berbeda ukurannya. TAG Heading tersebut adalah <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>.
Contoh coding :

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>


4. PARAGRAPHS : alinea merupakan sekumpulan kalimat yang saling berkaitan antara kalimat yang satu dengan kalimat yang lain.
Contoh coding:

<!DOCTYPE html>

<html>
<body>

<p>oaoe 1.</p>
<p>oaoe 2.</p>

</body>
</html>

5. HTML STYLE: element digunakan untuk menyisipkan kode style atau CSS ke dalam sebuah dokumen web (HTML) atau mempercantik tampilan sebuah web. <style> ditulis di dalam <head>..</head> yang merupakan kepala sebuah dokument.
Contoh coding :
<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">koko merah</p>
<p style="color:blue;">koko biru</p>
<p style="font-size:50px;">koko ukuran</p>

</body>
</html>

6.HTML FORMATTING :untuk mengatur unuran format teks seperti yang di lakukan di MS Word atau untuk merubah ukuran.
Contoh coding :
<!DOCTYPE html>
<html>
<body>

<p><b> bold</b></p>
<p><i>italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>


7. COMMENTS : Tag untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat meminta
 tag  baru. Tag COMMENTS  juga dapat digunakan untuk menonaktifkan bagian kode dengan tepat saat
 Anda menguji atau mengerjakan fitur baru yang belum siap atau memberikan intruksi.
Contoh coding:
<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>
DLL


sumber:
https://www.w3schools.com
di Tidak ada komentar:

Minggu, 27 Mei 2018

MEMBUAT CRUD PHP AJAX



 Dalam tutorial ini, kami membuat sistem komentar dasar yang terdiri dari formulir dengan dua bidang input: nama dan komentar. Seorang pengguna dapat menambahkan komentar pada halaman tanpa halaman reload (menggunakan Ajax) dan komentar ini disimpan dalam tabel komentar dalam database.

Semua komentar dalam database ditampilkan pada halaman dan pengguna dapat menghapus komentar hanya dengan melayang di atasnya dan mengklik tombol hapus yang muncul di komentar dan Ini juga  menghapus komentar tanpa memuat ulang halaman juga.

Aplikasi ini hanya membutuhkan satu tabel basis data. Langsung saja ke tutorial

1.instal XAMPP dan jalankan
2.Buat data base di localhost/phpmyadmin
3.Buat nama data base (ajax_crud) ikuti isi tabel
*id – int(11)
*name – Varchar(255)
*comment – text
4.Buat index.php untuk memnuat displays comments
5.Buat server.php untuk koneksi dari php dan database
6.Download jQuery di https://jquery.com/
7.Buat scripst.js untuk impementasi ajak dan jQuery
8.Buat styles.css untuk membuat tampilan
9.Semua itu index.php, server.php, scripst.js, styles.css (itu semua dijadikan 1 folser di C:\xampp\htdocs)

Jika siap buka sublime atau terserah maka akan seperti ini

Klik index.php dan copy code di bawah
<?php include('server.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Insert and Retrieve data from MySQL database with ajax</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="wrapper">
                    <?php echo $comments; ?>
                    <form class="comment_form">
      <div>
        <label for="name">Name:</label>
                    <input type="text" name="name" id="name">
      </div>
      <div>
                    <label for="comment">Comment:</label>
                    <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
      </div>
      <button type="button" id="submit_btn">POST</button>
      <button type="button" id="update_btn" style="display: none;">UPDATE</button>
                    </form>
  </div>
</body>
</html>
<!-- Add JQuery -->
<script src="jquery.min.js"></script>

<script src="scripts.js"></script>

Buka server dan copy code di bawah

<?php
  $conn = mysqli_connect('localhost', 'root', '', 'ajax_crud');
  if (!$conn) {
    die('Connection failed ' . mysqli_error($conn));
  }
  if (isset($_POST['save'])) {
    $name = $_POST['name'];
    $comment = $_POST['comment'];
    $sql = "INSERT INTO comments (name, comment) VALUES ('{$name}', '{$comment}')";
    if (mysqli_query($conn, $sql)) {
      $id = mysqli_insert_id($conn);
      $saved_comment = '<div class="comment_box">
          <span class="delete" data-id="' . $id . '" >delete</span>
          <span class="edit" data-id="' . $id . '">edit</span>
          <div class="display_name">'. $name .'</div>
          <div class="comment_text">'. $comment .'</div>
        </div>';
      echo $saved_comment;
    }else {
      echo "Error: ". mysqli_error($conn);
    }
    exit();
  }
  // delete comment fromd database
  if (isset($_GET['delete'])) {
    $id = $_GET['id'];
    $sql = "DELETE FROM comments WHERE id=" . $id;
    mysqli_query($conn, $sql);
    exit();
  }
  if (isset($_POST['update'])) {
    $id = $_POST['id'];
    $name = $_POST['name'];
    $comment = $_POST['comment'];
    $sql = "UPDATE comments SET name='{$name}', comment='{$comment}' WHERE id=".$id;
    if (mysqli_query($conn, $sql)) {
      $id = mysqli_insert_id($conn);
      $saved_comment = '<div class="comment_box">
        <span class="delete" data-id="' . $id . '" >delete</span>
        <span class="edit" data-id="' . $id . '">edit</span>
        <div class="display_name">'. $name .'</div>
        <div class="comment_text">'. $comment .'</div>
      </div>';
      echo $saved_comment;
    }else {
      echo "Error: ". mysqli_error($conn);
    }
    exit();
  }

  // Retrieve comments from database
  $sql = "SELECT * FROM comments";
  $result = mysqli_query($conn, $sql);
  $comments = '<div id="display_area">';
  while ($row = mysqli_fetch_array($result)) {
    $comments .= '<div class="comment_box">
        <span class="delete" data-id="' . $row['id'] . '" >delete</span>
        <span class="edit" data-id="' . $row['id'] . '">edit</span>
        <div class="display_name">'. $row['name'] .'</div>
        <div class="comment_text">'. $row['comment'] .'</div>
      </div>';
  }
  $comments .= '</div>';
?>

Buka scripts dan copy code dibawah

$(document).ready(function(){
  // save comment to database
  $(document).on('click', '#submit_btn', function(){
    var name = $('#name').val();
    var comment = $('#comment').val();
    $.ajax({
      url: 'server.php',
      type: 'POST',
      data: {
        'save': 1,
        'name': name,
        'comment': comment,
      },
      success: function(response){
        $('#name').val('');
        $('#comment').val('');
        $('#display_area').append(response);
      }
    });
  });
  // delete from database
  $(document).on('click', '.delete', function(){
  var id = $(this).data('id');
  $clicked_btn = $(this);
  $.ajax({
    url: 'server.php',
    type: 'GET',
    data: {
    'delete': 1,
    'id': id,
      },
      success: function(response){
        // remove the deleted comment
        $clicked_btn.parent().remove();
        $('#name').val('');
        $('#comment').val('');
      }
  });
  });
  var edit_id;
  var $edit_comment;
  $(document).on('click', '.edit', function(){
  edit_id = $(this).data('id');
  $edit_comment = $(this).parent();
  // grab the comment to be editted
  var name = $(this).siblings('.display_name').text();
  var comment = $(this).siblings('.comment_text').text();
  // place comment in form
  $('#name').val(name);
  $('#comment').val(comment);
  $('#submit_btn').hide();
  $('#update_btn').show();
  });
  $(document).on('click', '#update_btn', function(){
  var id = edit_id;
  var name = $('#name').val();
  var comment = $('#comment').val();
  $.ajax({
      url: 'server.php',
      type: 'POST',
      data: {
      'update': 1,
      'id': id,
      'name': name,
      'comment': comment,
      },
      success: function(response){
      $('#name').val('');
      $('#comment').val('');
      $('#submit_btn').show();
      $('#update_btn').hide();
      $edit_comment.replaceWith(response);
      }
  });
  });
});


Buka styles dan copycode di bawah

.wrapper {
  width: 45%;
  height: auto;
  margin: 10px auto;
  border: 1px solid #cbcbcb;
  background: white;
}
/*
* COMMENT FORM
**/
.comment_form {
  width: 80%;
  margin: 100px auto;
  border: 1px solid green;
  background: #fafcfc;
  padding: 20px;
}
.comment_form label {
  display: block;
  margin: 5px 0px 5px 0px;
}
.comment_form input, textarea {
  padding: 5px;
  width: 95%;
}
#submit_btn, #update_btn {
  padding: 8px 15px;
  color: white;
  background: #339;
  border: none;
  border-radius: 4px;
  margin-top: 10px;
}
#update_btn {
  background: #1c7600;
}
/*
* COMMENT DISPLAY AREA
**/
#display_area {
  width: 90%;
  padding-top: 15px;
  margin: 10px auto;
}
.comment_box {
  cursor: default;
  margin: 5px;
  border: 1px solid #cbcbcb;
  padding: 5px 10px;
  position: relative;
}
.delete {
  position: absolute;
  top: 0px;
  right: 3px;
  color: red;
  display: none;
  cursor: pointer;
}
.edit {
  position: absolute;
  top: 0px;
  right: 45px;
  color: green;
  display: none;
  cursor: pointer;
}
.comment_box:hover .edit, .comment_box:hover .delete {
  display: block;
}
.comment_text {
  text-align: justify;
}
.display_name {
  color: blue;
  padding: 0px;
  margin: 0px 0px 5px 0px;
}


Jika semua sudah puka http://localhost/Ajax_php_CRUD/
Maka akan seperti ini

Untuk C (Create): yang berarti membuat sebuah data baru



R (Read): Membaca atau menampilkan suatu data yang tadinya berada didatabase 



U (Update): merubah atau edit data yang sudah di Read





D (Delete):hapus data



untuk lengkap nya bisa download di sini https://drive.google.com/drive/u/0/my-drive











di Tidak ada komentar:
Langganan: Postingan (Atom)

Featured Post

Mengetahui tentang tag-tag HTML5

STRUKTUR HTML  HTML5 adalah versi terbaru dari HTML yang statusnya sudah direkomendasikan oleh W3C walau belum 100% sempurna, tapi beb...