Responsive Display Picture in Profile with Change Photo in PHP/MYSQLi

0
123

Good day everyone. Today! I’m gonna teach you on creating a responsive display profile with a feature change photo for your profile page.

So let’s start now our tutorial.

So first, please download the this. dp-design .

Extract the zip file. All the contents there are the css and javascripts needed for a responsive display picture when it is clicked.

Now let’s proceed to the system codes.

First of all create a database. Name it as any name you desire, in my case I choose “itsourcecode” as the name of the database.

Then create a table, name it as “avatas” then put the following attributes.

  1. CREATE TABLE `avatars` (
  2. `ava_id` int(11) NOT NULL,
  3. `ava_link` text NOT NULL
  4. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

For the connection to the database. Create a “conn.php” file then put the following codes.

  1. <?php
  2. $conn = new mysqli('localhost', 'root', '', 'itsourcecode');
  3.  
  4. if ($conn->connect_error) {
  5. echo $conn->error;
  6. }
  7. ?>

On your profile page. Please put the following codes.

  1. <?php
  2. include 'conn.php';
  3. ?>
  1. &lt;html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="UTF-8"&gt;        &lt;title&gt;Responsive Profile&lt;/title&gt;        &lt;link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css"/&gt;        <a href="http://assets/fancybox/jquery.fancybox-1.3.4.pack.js">http://assets/fancybox/jquery.fancybox-1.3.4.pack.js</a>        &lt;link href="assets/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" media="screen" type="text/css"/&gt;        <a href="http://assets/slimbox/jquery.min.js">http://assets/slimbox/jquery.min.js</a>        <a href="http://assets/slimbox/slimbox2.js">http://assets/slimbox/slimbox2.js</a>        &lt;link href="assets/slimbox/slimbox2.css" rel="stylesheet" type="text/css"/&gt;                    $(document).ready(function() {            /*            *   Examples - images            */
  2. $("a[rel=example_group]").fancybox({                'transitionIn' : 'none', 'transitionOut' : 'none', 'titlePosition' : 'over', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>'; } });
  3. /* *   Examples - various */
  4. $("#various1").fancybox({ 'titlePosition' : 'inside', 'transitionIn' : 'none', 'transitionOut' : 'none' });
  5. $("#various2").fancybox();
  6. $("#various3").fancybox({ 'autoScale' : true, 'transitionIn' : 'none', 'transitionOut' : 'none', });
  7. $("#various4").fancybox({ 'padding' : 0, 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'dissolve' }); $("#various5").fancybox({ 'autoScale' : true, 'transitionIn' : 'none', 'transitionOut' : 'none', });$("#various6").fancybox({ 'autoScale' : true, 'transitionIn' : 'none', 'transitionOut' : 'none', });$("#various7").fancybox({ 'autoScale' : true, 'transitionIn' : 'none', 'transitionOut' : 'none', }); $("#various8").fancybox({ 'autoScale' : true, 'transitionIn' : 'none', 'transitionOut' : 'none', });$("#various9").fancybox({ 'autoScale' : true, 'transitionIn' : 'none', 'transitionOut' : 'none', });$("#various10").fancybox({ 'autoScale' : true, 'transitionIn' : 'none', 'transitionOut' : 'none', });$("#various11").fancybox({ 'autoScale' : true, 'transitionIn' : 'none', 'transitionOut' : 'none', });$("#various12").fancybox({ 'autoScale' : true, 'transitionIn' : 'none', 'transitionOut' : 'none', });$("#various13").fancybox({ 'autoScale' : true, 'transitionIn' : 'none', 'transitionOut' : 'none', }); });         &lt;style&gt;            body {                padding-top: 10px;            }            .ava {                background-color: #ffffff;                border: 1px solid #c0c0c0;            }        &lt;/style&gt;    &lt;/head&gt;    &lt;body&gt;
  8. <div class="container">
  9. <div class="jumbotron">
  10.  
  11.                                 query("SELECT * FROM avatars ORDER BY ava_id DESC");                    $ava_data = $ava-&gt;fetch_assoc();                                        if ($ava-&gt;num_rows == null) {                        $ava_img = "images/user-ava.png";                    } else {                        $ava_img = $ava_data['ava_link'];                    }                ?&gt;                                <a>" rel="lightbox-gallery" title=""&gt;                    <img />" width="200px" class="ava"/&gt;                </a>
  12.  
  13. <a href="change-photo.php">Change Photo</a>
  14. <table style="margin-top: 20px;" width="100%" cellspacing="10" cellpadding="10">
  15. <tr>
  16. <td width="10%"><b>Name:</b></td>
  17. <td width="90%">Harley F. Lumagui</td>
  18. </tr>
  19. <tr>
  20. <td width="10%"><b>Age:</b></td>
  21. <td width="90%">19</td>
  22. </tr>
  23. <tr>
  24. <td width="10%"><b>Gender:</b></td>
  25. <td width="90%">Male</td>
  26. </tr>
  27. <tr>
  28. <td width="10%"><b>Civil Status:</b></td>
  29. <td width="90%">Single</td>
  30. </tr>
  31. </div>
  32. &lt;/div&gt;    &lt;/body&gt;&lt;/html&gt;

For changing a photo. Create a “change-photo.php” file then put the following codes.

  1. &lt;?php
  2. include 'conn.php';
  3. ?&gt;
  1. &lt;html&gt;
  2. &lt;head&gt;
  3. &lt;meta charset="UTF-8"&gt;
  4. &lt;title&gt;Change Photo&lt;/title&gt;
  5. &lt;link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css"/&gt;
  6. &lt;style&gt;
  7. body {
  8. padding-top: 10px;
  9. }
  10. .ava {
  11. background-color: #ffffff;
  12. border: 1px solid #c0c0c0;
  13. }
  14. &lt;/style&gt;
  15. &lt;/head&gt;
  16. &lt;body&gt;
  17. <div class="container">
  18. <div class="jumbotron">
  19.  
  20. <b>Your current avatar:</b>
  21.  
  22. query("SELECT * FROM avatars ORDER BY ava_id DESC");
  23. $ava_data = $ava-&gt;fetch_assoc();
  24.  
  25. if ($ava-&gt;num_rows == null) {
  26. $ava_img = "images/user-ava.png";
  27. } else {
  28. $ava_img = $ava_data['ava_link'];
  29. }
  30. ?&gt;
  31. <img />" width="200px" class="ava"/&gt;
  32.  
  33. query("INSERT INTO avatars (ava_link) VALUES ('$ava_link')");
  34. if ($upload) {
  35. header("Location: index.php");
  36. } else {
  37. echo $conn-&gt;error;
  38. }
  39. }
  40. }
  41. ?&gt;
  42.  
  43. <form action="" enctype="multipart/form-data" method="post"></form></div>
  44. &lt;/div&gt;
  45. &lt;/body&gt;
  46. &lt;/html&gt;

Done.

Screenshots:

If you have questions regarding this tutorial entitled as “Responsive Display Picture in Profile with Change Photo in PHP/MYSQLI” feel free to ask us by commenting below or visit on our contact page. Thank you.

Facebook Comments
(Visited 149 times, 1 visits today)