Created Background User Websit Tampilan Dinamis

User_backgroud

Semua code Akan Bekerja apabila melakukan tahab-tahab sebagai berikut
Struktur Folder Dan File Webmaster tersedia
A.Susun dan pasang pada Root folder pada webhosting
atau mengunakan simulasi/ latihan penyimpanan local terlebih dahulu

style.php

Style.php
Penampilan /backround profile user,mepercantik dan expresikan hobi seseorang dengan gambar diri sendiri,pemandangan.
Dengan tampilan lebih baru code standar
atau lebih memilih mengatur ukuran px foto
seperti didalam code merubah baris

seperti ini conto:
body{
background: linear-gradient( rgba(44, 38, 38, 0.45), rgba(10, 0, 0, 0.45) ), url("./userfiles/background-images/<?php echo $rws['user_backgroundpicture']; ?>")!important;
(44, 38, 38, 0.45)

Atau lebih memilih standar contoh

body{

background: linear-gradient( rgba(44, 38, 38, 0.45), rgba(0, 0, 0, 0.45) ), url("./userfiles/background-images/<?php echo $rws['user_backgroundpicture']; ?>")!important;

rubah sesuaikan sediri

controllers

base

style.php

javascript.php

<script src="assets/js/base/jquery.min.js"></script>
    <script src="assets/js/base/smoothscroll.js"></script>
    <script src="assets/js/base/jquery.form.js"></script>
    
    
    
    <script src="assets/js/bootstrap/bootstrap.js"></script>

<script src="assets/js/base/jquery-ui.js"></script>
 
    
    <link href="assets/js/bootstrap-form-helpers/bootstrap-formhelpers.js"></script>
    <link href="assets/js/bootstrap-form-helpers/bootstrap-formhelpers-colorpicker.js"></script>    
    <link href="assets/js/bootstrap-form-helpers/bootstrap-formhelpers-datepicker.js"></script>

<script src="assets/js/base/offcanvas.js"></script>
    <script src="assets/js/base/scripts.js"></script>

<script src="assets/js/pace/pace.min.js"></script>

<script src="assets/js/instantclick/instantclick.min.js" data-no-instant></script>

<script data-no-instant>
        InstantClick.init();
    </script>

<script src="assets/js/wow/wow.js"></script>

<script>
        new WOW().init();
    </script>

<script>
        $(document).ready(function(){
            $("body").hide(0).delay(100).fadeIn(1000)
        });
    </script>
    
    
    <script type="text/javascript">
        $(document).ready(function() {
            $("user_username").keyup(function (e) {
                $(this).val($(this).val().replace(/\s/g, ''));
                var username = $(this).val();
                if(username.length < 1){$("status").html('');return;}
                if(username.length >= 1){
                    $("status").html('<img src="assets/img/ajax-loader.gif" />');
                    $.post('components/check-username-availability.php', {'user_username':user_username}, function(data) {
                      $("status").html(data);
                    });
                }
            }); 
        });
    </script>

<script type="text/javascript"> 
        var totalCount = 5;
        function ChangeIt() {
            var num =  Math.ceil( Math.random() * totalCount );
            document.body.background = 'assets/img/backgrounds/background'+num+'.jpg';
            document.body.style.backgroundRepeat = "repeat";
        }
    </script>

<script type="text/javascript">
        $(document).ready(function(){
            $(".search").keyup(function() {
                var searchbox = $(this).val();
                var dataString = 'searchword='+ searchbox;
                if(searchbox==''){
                }
                else{
                    $.ajax({
                        type: "POST",
                        url: "components/search.php",
                        data: dataString,
                        cache: false,
                        success: function(html){
                            $("#display").html(html).show();
                        }
                    });
                }return false;    
            });
        });
        jQuery(function($){
           $("#searchbox").Watermark("Search");
       });
    </script>

<script type="text/javascript">
        $(document).mouseup(function (e){
            var container = $("#display");
            if (!container.is(e.target) && container.has(e.target).length === 0){
                container.hide();
            }
        });
    </script>

<script src="assets/js/base/jquery-1.8.0.min.js"></script>

<script type="text/javascript">
        $(function(){
            $("#uploadFile").on("change", function(){
                var files = !!this.files ? this.files : [];
                if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
                if (/^image/.test( files[0].type)){ // only image file
                    var reader = new FileReader(); // instance of the FileReader
                    reader.readAsDataURL(files[0]); // read the local file
                    reader.onloadend = function(){ // set image data as background of div
                        $("#uploadImagePreview").css("display","block");
                        $("#imagePreview").css("background-image", "url("+this.result+")");
                        $("#imagePreview").css("max-height","223px");    
                        $("#imagePreview").css("height","223px"); 
                    }
                }
            });
        });
    </script>

<script type="text/javascript">
        $(function(){
            $("#uploadBackgroundFile").on("change", function(){
                var files = !!this.files ? this.files : [];
                if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
                if (/^image/.test( files[0].type)){ // only image file
                    var reader = new FileReader(); // instance of the FileReader
                    reader.readAsDataURL(files[0]); // read the local file
                    reader.onloadend = function(){ // set image data as background of div
                        $("#uploadBackgroundImagePreview").css("display","block");
                        $("#imageBackgroundPreview").css("background-image", "url("+this.result+")");
                        $("#imageBackgroundPreview").css("max-height","223px");  
                        $("#imageBackgroundPreview").css("height","223px"); 
                    }
                }
            });
        });
    </script>

<script type="text/javascript"> 
        ChangeIt();
    </script> 
    
    <script>
        $('.carousel').carousel({
          interval: 3500
        })
 </script>

font.php

head.php

meta-tags .php

css .php

Kerangka tersebut bersarang membentuk seperti font,tataletak ukuran gambar
pondasi yang mengikat halaman websit
semua terdapat di
folder controllst.
beberapa meraka sudah saya bahas pada post terdahulu
pondasi harus benar- benar tertulis di root folder webserver anda ,untuk menjaga hasil yang sesuai ,untuk tidak merubah code dan script yang sudah ada
kehilangan satu huruf yang tidak sesuai dapat meyebabkan error
pada halaman websit.
code style Backhround baru lebih fres
hannya Merubah baris berikut

hasil gambar pada contoh
code

style.php

Membuat folder dan database
user_background.
Pada awal membangun proyek sudah dijelaskan tentang user atau pengguna yang didalamnya terdapat juga data dan code user_background
User_background dan System User saling berkaitan

B.Meletakan dan posisi
Mengunakan Panggilan magic dan meletakan antara
</head>
........
<?php includ ' controller/base/style.php'?>
........
</body>
Meletakan
Didalam my_profile hentikan penyebaram rws untuk menjaga hak privadi
dan dapat dilihat dari semua sisi.
Pos secara bertahap dipublikasikan
jika tiba-tiba menemekan halaman ini akan membingungkan
budayakan membaca post dari awal proyek ini

DATA BARU

Created Background User Websit Tampilan Dinamis

Posting Komentar untuk "Created Background User Websit Tampilan Dinamis"

Menu Halaman Statis