Checkbox Inline For Avatar Default Live Chat php

Table of Contents

Topic pembahasan pagi hari ini adalah
Checkbox Inline For Avatar Default
Live Chat v 1.0
Biasanya fitur Live chat dibuat pada websit besar yang penyediakan layanan kendali instan/ cepat pada control panel seperti penyedia jasa onlin hosting onlin shop dan lain -lain.
Sebelum memulai pembangunan proyek
Memahami terlebih dahulu.
Checkbox Inline Avatar Default..
Menentukan pilihan seperti definisi yang ditentukan dari beberapa daftar terpili.

---

Contoh untuk memilih avatar defaul
👽
👻
☠️
Saya membuat dan menulis secara manual untuk memberi umpan kepada gambar 
👽 benar benar menulis mereka dan menyimpan secara manual pada folder
📁htdocs
    📁userfiles
          📁 background-images
                default.png

---

Contoh:

Langka Awal
Membuat table database avatar_img
Contoh:
user_messages.sql
CREATE TABLE IF NOT EXISTS `avatar_img` ( `avatar_img_id` int(11) NOT NULL AUTO_INCREMENT, `avatar_img_name` varchar(300) NOT NULL, `avatar_img_text` text NOT NULL, `avatar_img_semester` varchar(300) NOT NULL, `avatar_img_data` varchar(300) NOT NULL, `avatar_img_image` varchar(300) NOT NULL, PRIMARY KEY (`avatar_img_id`), KEY `avatar_img_name` (`avatar_img_name`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

---

Wajib memasang sarang
Controlets Assets
Bootstrap drobdown
Simpan Componets Bootstrap,Css,Js.php

---

Membuat
index.php   

Contoh:
index.php
<?php require '_database/database.php'; ?><?php include 'controllers/base/head.php' ?><?php include 'controllers/navigation/first-navigation.php'?> <?php ?> <div class="container"> <div class="panel panel-default"> <div class="panel-body"style=" box-shadow:1px 3px 2px 1px #00FFFF; border: 1px solid; " > <div class="panel-body"> <div class="row clearfix"> <div class="col-md-12 column"style=" box-shadow:1px 3px 2px 1px #C0C0C0; border: 1px solid; background: #00FFFF; " ><form action="avatar_img_chat.php" method="post" enctype="multipart/form-data" id="UploadForm"> <div class="form-group"> <span class="input-group-addon" id="status"> <div class="input-group"> <span class="input-group-addon"> <!-- http://user_username= --> Saring Kata/ </span> <input type="username" class="form-control input-lg" placeholder="Name," name="avatar_img_name" id="avatar_img_name" required> <span class="input-group-addon" id="status"></span> </div></span> <div class="row"> <div class="col-lg-6"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <!-- http://avatar_img_text= --> Saring Kata/ </span> <input type="text" class="form-control input-lg" placeholder="Tulis Sesuatu" name="avatar_img_text" id="avatar_img_name" required><span class="input-group-addon" id="status"> </div></div></div></div><span class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"style="font-size: 10px;col or: orange"/> <i class="" style="font-size: 23px;color: orange;">🖌️Avatar</i> </a> <span class="dropdown-menu" style="font-size: 1.0em;co or: orange"/> <div class="form-group"> <label for="avatar_img_semester"></label> <br><label class="checkbox-inline" for="semester-inline-checkbox1"><input type="checkbox" id="semester-inline-checkbox1" name="avatar_img_semester" value="default1.jpg"> <img src="userfiles/background-images/default1.jpg"> </label> <label class="checkbox-inline" for="semester-inline-checkbox2"><input type="checkbox" id="semester-inline-checkbox2" name="avatar_img_semester" value="default2.jpg"><img src="userfiles/background-images/default2.jpg"></label> <label class="checkbox-inline" for="semester-inline-checkbox3"><input type="checkbox" id="semester-inline-checkbox3" name="avatar_img_semester" value="default3.jpg"> <img src="userfiles/background-images/default3.jpg"> </label> <label class="checkbox-inline" for="semester-inline-checkbox4"><input type="checkbox" id="semester-inline-checkbox4" name="avatar_img_semester" value="default4.jpg"> <img src="userfiles/background-images/default4.jpg"> </label> <label class="checkbox-inline" for="semester-inline-checkbox5"><input type="checkbox" id="semester-inline-checkbox5" name="avatar_img_semester" value="default15.jpg"> <img src="userfiles/background-images/default15.jpg"></label> <label class="checkbox-inline" for="semester-inline-checkbox6"><input type="checkbox" id="semester-inline-checkbox6" name="avatar_img_semester" value="default13.jpg"> <img src="userfiles/background-images/default13.jpg"></label> <label class="checkbox-inline" for="semester-inline-checkbox7"><input type="checkbox" id="semester-inline-checkbox7" name="avatar_img_semester" value="default12.jpg"> <img src="userfiles/background-images/default12.jpg"> </label> <label class="checkbox-inline" for="semester-inline-checkbox8"><input type="checkbox" id="semester-inline-checkbox8" name="avatar_img_semester" value="default11.jpg"> <img src="userfiles/background-images/default11.jpg"> </label></label><hr/></span> </span> </ul></div></div></div></div></div></div></div><label for="forum-topic-attachment">Image</label> <input name="BackgroundImageFile" type="file" id="uploadBackgroundFile" class="btn btn-default" name="forum-topic-attachment"/> <hr> <button type="submit" class="btn btn-primary" name="submit_button" id="submit_button">Public</button></form><?php $sql = "SELECT * FROM avatar_img ORDER BY avatar_img_semester DESC"; $result = mysqli_query($database,$sql); while($rws = mysqli_fetch_array($result)){ ?><body style=" box-shadow:1px 3px 2px 1px #C0C0C0; border: 1px solid; " > <div class="container"> <div class="panel panel-default"> <div class="panel-body"> <div class="row clearfix"> <div class="col-md-12 column"style=" box-shadow:1px 3px 2px 1px #C0C0C0; border: 1px solid; background: #00FFFF; " ><img class="img-circle" src="userfiles/background-images/<?php echo $rws['avatar_img_data'];?>" class="" alt="Generic placeholder image" style=" width: 37px; height: 37px box-shadow:3px 3px 3px 3px #00FFFF; left: calc(50% - 7px); top: calc(50% - 6px); border: 2px solid; background: #C0C0C0; " ><?php echo $rws['avatar_img_name'];?></a><?php echo $rws['avatar_img_text'];?>  <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" data-ad-client="ca-pub-2799255318709444" data-ad-format="fluid" data-ad-layout-key="-gw-3+1f-3d+2z" data-ad-slot="2121880351" style="display: block;"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>                                       </div></i><i class="" style="font-size: 1.0> </i></div><div class="forum-attachment"><?php if($rws['avatar_img_image']){ ?><div class="col-md-3 column"><img src="userfiles/background-images/<?php echo $rws['avatar_img_image'];?>" alt="Generic placeholder image" style=" width: 200px; height: 200px; box-shadow:3px 3px 3px 3px #ADC2B3; left: calc(50% top: calc(50% - 6px); border: 2px solid; background: #00FFFF; " ></div><?php } ?><div/></i> </div></div></div></div></div><?php } ?>
Sarang dari beberapa perintah seperti
controles dropdown
Imput data
show result
meletakan mereka dengan metode panggilan magic pada file index.php

---

<?php include'controllets/navigation/firt-navigation.php'?>

---

input data for table avatar_image
<form action="avatar_img_chat.php" method="post" enctype="multipart/form-data" id="UploadForm"> <div class="form-group"> <span class="input-group-addon" id="status"> <div class="input-group"> <span class="input-group-addon"> <!-- http://user_username= --> Saring Kata/ </span> <input type="username" class="form-control input-lg" placeholder="Name," name="avatar_img_name" id="avatar_img_name" required> <span class="input-group-addon" id="status"></span> </div></span> <div class="row"> <div class="col-lg-6"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <!-- http://avatar_img_text= --> Saring Kata/ </span> <input type="text" class="form-control input-lg" placeholder="Tulis Sesuatu" name="avatar_img_text" id="avatar_img_name" required> <span class="input-group-addon" id="status"> </div></div></div></div><span class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"style="font-size: 10px;col or: orange"/> <i class="" style="font-size: 23px;color: orange;">🖌️Avatar</i> </a> <span class="dropdown-menu" style="font-size: 1.0em;co or: orange"/> <div class="form-group"> <label for="avatar_img_semester"></label> <br> <label class="checkbox-inline" for="semester-inline-checkbox1"> <input type="checkbox" id="semester-inline-checkbox1" name="avatar_img_semester" value="default1.jpg"> <img src="userfiles/background-images/default1.jpg"> </label> <label class="checkbox-inline" for="semester-inline-checkbox2"> <input type="checkbox" id="semester-inline-checkbox2" name="avatar_img_semester" value="default2.jpg"> <img src="userfiles/background-images/default2.jpg"></label> <label class="checkbox-inline" for="semester-inline-checkbox3"> <input type="checkbox" id="semester-inline-checkbox3" name="avatar_img_semester" value="default3.jpg"> <img src="userfiles/background-images/default3.jpg"> </label> <label class="checkbox-inline" for="semester-inline-checkbox4"> <input type="checkbox" id="semester-inline-checkbox4" name="avatar_img_semester" value="default4.jpg"> <img src="userfiles/background-images/default4.jpg"> </label> <label class="checkbox-inline" for="semester-inline-checkbox5"> <input type="checkbox" id="semester-inline-checkbox5" name="avatar_img_semester" value="default15.jpg"> <img src="userfiles/background-images/default15.jpg"> </label> <label class="checkbox-inline" for="semester-inline-checkbox6"> <input type="checkbox" id="semester-inline-checkbox6" name="avatar_img_semester" value="default13.jpg"> <img src="userfiles/background-images/default13.jpg"></label> <label class="checkbox-inline" for="semester-inline-checkbox7"> <input type="checkbox" id="semester-inline-checkbox7" name="avatar_img_semester" value="default12.jpg"> <img src="userfiles/background-images/default12.jpg"> </label> <label class="checkbox-inline" for="semester-inline-checkbox8"> <input type="checkbox" id="semester-inline-checkbox8" name="avatar_img_semester" value="default11.jpg"> <img src="userfiles/background-images/default11.jpg"> </label> </label> <hr/> </span> </span> </ul></div></div></div></div></div></div></div><label for="forum-topic-attachment">Image</label> <input name="BackgroundImageFile" type="file" id="uploadBackgroundFile" class="btn btn-default" name="forum-topic-attachment"/> <hr> <button type="submit" class="btn btn-primary" name="submit_button" id="submit_button">Public</button> </form>
Input data for live chat

---

 insert to table avatar_img
avatar_img_chat.php
<?php ini_set("display_errors",1); session_start(); if($_SERVER['REQUEST_METHOD'] == 'POST'){ require '_database/database.php'; $avatar_img_name=$_REQUEST['avatar_img_name']; $avatar_img_text=$_REQUEST['avatar_img_text']; $avatar_img_semester=$_REQUEST['avatar_img_semester']; $Destination = 'userfiles/background-images'; if(!isset($_FILES['BackgroundImageFile']) || !is_uploaded_file($_FILES['BackgroundImageFile']['tmp_name'])){ $BackgroundNewImageName= ''; move_uploaded_file($_FILES['BackgroundImageFile']['tmp_name'], "$Destination/$BackgroundNewImageName"); } else{ $RandomNum = rand(0, 9999999999); $ImageName = str_replace(' ','-',strtolower($_FILES['BackgroundImageFile']['name'])); $ImageType = $_FILES['BackgroundImageFile']['type']; $ImageExt = substr($ImageName, strrpos($ImageName, '.')); $ImageExt = str_replace('.','',$ImageExt); $ImageName = preg_replace("/\.[^.\s]{3,4}$/", "", $ImageName); $BackgroundNewImageName = $ImageName.'-'.$RandomNum.'.'.$ImageExt; move_uploaded_file($_FILES['BackgroundImageFile']['tmp_name'], "$Destination/$BackgroundNewImageName"); } $sql="INSERT INTO avatar_img ( avatar_img_name, avatar_img_text, avatar_img_data, avatar_img_semester, avatar_img_image) VALUES ('$avatar_img_name', '$avatar_img_text', '$avatar_img_semester', CURRENT_TIMESTAMP, '$BackgroundNewImageName')"; mysqli_query($database,$sql)or die(mysqli_error($database)); header("location:index.php?user_username"); } ?>
Melempar file upload kedalam folder
 $Destination = 'userfiles/background-images';
avatar_img_data ,sebagai checkbox-inline untuk menulis data sedangkan file untuk avatar default menulis manual meletakan file terlebih dahulu kedalam folder background-images
untuk memangil kembali dan ditampilkan sebagai photo profil chat live

---

<br>
<label class="checkbox-inline" for="inline-checkbox1">
<input type="checkbox" id="semester-inline-checkbox1" name="avatar_img_semester" value="default1.jpg">

---

 <?php
    $sql = "SELECT * FROM avatar_img ORDER BY avatar_img_semester DESC";
    $result = mysqli_query($database,$sql);
    while($rws = mysqli_fetch_array($result)){
?>
Memangil semua data dari table avatar_img
membentuk seperti
name ,file,date time
Dapatkan code extrak dan upload pada hosting anda
Semua file live chat v1.0

---