Software, Webpage

Semi dynamic webpage template

Udit kumar agarwal / October 30, 2017

 

 

Semi dynamic webpage template with Google sheets integration

INDEX
  1. Introduction
  2. Purpose Behind
  3. Proposed Work
  4. Experimental Results
  5. Conclusion
  6. References  

 

Introduction

 

Our project aims at providing a semi-dynamic template of a fully fledged highly responsive webpage for small scale organizational usage. With improved security considerations and better organization this project integrates google sheets services as a database for a website. Google sheets being easy to deploy and use makes content updation easier and a lot more user friendly. Several other functionalities like Google scripting engine along with google forms can be very easily integrated with google sheets thus, can be used for real time and secure updation of website content. Furthermore, it separates developer and non-developer roles thus defining user privileges.

 

Several formatting and scripting languages like HTML, JQuery, PHP and CSS were used for complete frontend and backend development. Necessary security measures has been incorporated to provide introductory and necessary protection against various unwanted attacks like XSS.
Additionally, important measures were taken for making website responsive on various viewports, and platforms to provide best user experience.

 

Purpose Behind

 

There were two main objectives for our design:
  • Security Consideration
  • Separation of developer and non-developer parts

 

  1. Security Considerations:

 

Heavy websites are mostly build on packages like wordpress, drupal etc. These rely heavily on local  dynamic databases like MySQL, MongoDB etc. During a successful DDOS attack, large chunks of firewall logs gets collected in server, thus there’s no space left for dynamic services to store their data and they  usually terminate, causing website to fail.
Apart from this, using local database also makes a website prone to attacks like, SQL Injection, Privilege abuse, Database protocol vulnerabilities etc.

 

  2. Separation of developer and non-developer roles

 

Websites requires both developer roles, like maintaining, designing and debugging the site and non-developer role like content preparation and regular content updation.
Storing both the segments in a single file might lead to unwanted distribution of privileges, by mistake changes in the code etc.  This also increases website maintenance costs.
Proposed Work

 

Untitled Diagram(1).jpg
Proposed design
Front End Overview
Complete front end design can be divided into 5 different sectors,namely
  • NAVIGATIONAL BAR
    • used for linking different pages together with the main page.
    • Ensures easy navigation for users.
  • HEADER
    • Contains title of the page along with organization logo.
    • Contains About us link.
Untitled Diagram(2).jpg

 

 

  • CAROUSAL
    • For impressive display of work done by the organization.
    • Should be mobile compatible.
  • EVENTS
    • For display of recent events organized by the organization, along with their link and description.
  • ABOUT US
    • For team introduction, along with initial motto of the organization.

 

CORRESPONDING CODE:
                                             

 

<!DOCTYPE html>
<html>
   <head>
      <link rel=“shortcut icon” type=“image/x-icon” href=“img/logo.png” />
      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
      <link rel=“stylesheet” href=“css/common.css”>
      <link rel=“stylesheet” href=“css/device_specific.css”>
      <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
      <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
      <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>
      <meta content=“utf-8” http-equiv=“encoding”>
      <title>
         CEDT
     </title>
      <meta name=“description” content=“Official website of Center of Embedded Design and Technology”>
      <meta name=“viewport” content=“width=device-width, initial-scale=1”>
      <style type=“text/css”>
         h4{
         font-size: 1.3em;
         }
         h5{
         font-size: 1.2em;
         }
         body { padding-top: 55px; }
         .hidden {
         display: none;
         }
      </style>
   </head>
   <body style=“background-color: ghostwhite;”>
      <header role=“banner” class=“navbar navbar-fixed-top navbar-inverse”>
         <div class=“container”>
            <div class=“navbar-header”>
               <button data-toggle=“collapse-side” data-target=“.side-collapse” data-target-2=“.side-collapse-container” type=“button” class=“navbar-toggle pull-left”><span class=“icon-bar”></span><span class=“icon-bar”></span><span class=“icon-bar”></span></button>
            </div>
            <div class=“navbar-inverse side-collapse in”>
               <nav role=“navigation” class=“navbar-collapse”>
                  <ul class=“nav navbar-nav”>
                     <li><a href=“#Wiki”>Home</a></li>
                     <li><a href=“#Wiki”>Wiki</a></li>
                     <li><a href=“#Events”>Events</a></li>
                     <li><a href=“#Events”>Our Team</a></li>
                  </ul>
               </nav></div></div></header>
      <!– /////////////////////////////////////////////////////////////Main page start ///////////////////////////////////////////////////–>
      <!– Division 1–>
      <div style=“background-image: url(‘img/stars.jpg’);”>
         <div class=“container-fluid” style=“background-color:#eceff1; margin-left: 0.5em;margin-right: 0.5em;height:11em;opacity:0.9;” >
            <div class=“row”>
               <!– Division 1.1 LOGO–>
               <div id=“div1-1” class=“col-xs-1” style=“padding: 0px;margin-right: 1em;”>
                  <img class=“img-responsive” src=“img/logo.png” alt=“logo” height=100 width=120 style=“position: relative;left:7%;margin-top:1em;”>
                  <div id=“div1-1_link” style=“text-align: center;margin-top:2em;margin-left: 0.5em;”>
                     <div>
                        <h5><a class=“nav-link” href=“contactus.php” target=“_blank”>Contact us</a></h5>
                     </div>
                     <div>
                        <h5><a class=“nav-link” href=“#” target=“_blank”>About us</a></h5>
                     </div>
                  </div>
               </div>
               <!– Division 1.2 HEADER–>
               <div id=“div1-2” class=“col-xs-9” style=“text-align:center;”>
                  <h1 style=“position: relative ;margin-top: 1%;font-weight: bold;”>Centre for Electronic Design and Technology</h1>
                  <h2 style=“position: relative ;margin-top: 1%;”>Block 4, Netaji Subash Institute of Technology</h2>
                  <h2 style=“position: relative ;margin-top: 1%;margin-bottom: 0.5%;”>Dwarka, New Delhi</h2>
               </div>
               <div id=“div1-3” class=“col-xs-1” >
                  <br>
                  <div>
                     <h4 class=“centerify”><a class=“nav-link” href=“contactus.php” target=“_blank”>Contact Us</a></h4>
                  </div>
                  <div>
                     <h4 class=“centerify”><a class=“nav-link” href=“#” target=“_blank”>About Us</a></h4>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!– Carosal–>
      <div style=“background-color: darkmagenta;padding-top: 1em;padding-bottom: 1em;margin-top: 0.5em;background-image: url(‘img/elec2.jpg’);”>
         <div class=“container” style=“opacity: 0.90;”>
            <div id=“myCarousel” class=“carousel slide” data-ride=“carousel”>
               <!– Wrapper for slides –>
               <div class=“carousel-inner”>
                  <div class=“item active”>
                     <img src=“<?php echo $data[5][3];?>” height=400 width=760>
                     <div class=“carousel-caption”>
                        <h4><a href=“#” style=“color: rgb(255,255,255)”><strong><?php echo $data[5][1]; ?></strong><br><?php echo $data[5][2]; ?> </a></h4>
                     </div>
                  </div>
                  <!– End Item –>
                  <div class=“item”>
                     <img src=“<?php echo $data[6][3];?>”>
                     <div class=“carousel-caption”>
                        <h4><a href=“#” style=“color: rgb(255,255,255)”><strong><?php echo $data[6][1]; ?></strong><br><?php echo $data[6][2]; ?></a></h4>
                     </div>
                  </div>
                  <!– End Item –>
                  <div class=“item”>
                     <img src=“<?php echo $data[7][3];?>”>
                     <div class=“carousel-caption”>
                        <h4><a href=“#” style=“color: rgb(255,255,255)”><strong><?php echo $data[7][1]; ?></strong><br><?php echo $data[7][2]; ?></a></h4>
                     </div>
                  </div>
                  <!– End Item –>
                  <div class=“item”>
                     <img src=“<?php echo $data[8][3];?>”>
                     <div class=“carousel-caption”>
                        <h4><a href=“#” style=“color: rgb(255,255,255)”><strong><?php echo $data[8][1]; ?></strong><br><?php echo $data[8][2]; ?></a></h4>
                     </div>
                  </div>
                  <!– End Item –>
                  <div class=“item”>
                     <img src=“<?php echo $data[9][3];?>”>
                     <div class=“carousel-caption”>
                        <h4><a href=“#” style=“color: rgb(255,255,255)”><strong><?php echo $data[9][1]; ?></strong><br><?php echo $data[9][2]; ?></a></h4>
                     </div>
                  </div>
                  <!– End Item –>
                  <div class=“item”>
                     <img src=“<?php echo $data[10][3];?>”>
                     <div class=“carousel-caption”>
                        <h4><a href=“#” style=“color: rgb(255,255,255)”><strong><?php echo $data[10][1]; ?></strong><br><?php echo $data[10][2]; ?></a></h4>
                     </div>
                  </div>
                  <!– End Item –>
               </div>
               <!– End Carousel Inner –>
               <ul class=“list-group col-sm-4” style=“padding-left: 1em;”>
                  <li data-target=“#myCarousel” data-slide-to=“0” class=“list-group-item active” style=“background-color: silver;”>
                     <h4><strong><?php echo $data[5][1]; ?></strong></h4>
                  </li>
                  <li data-target=“#myCarousel” data-slide-to=“1” class=“list-group-item” style=“background-color: silver;”>
                     <h4><strong><?php echo $data[6][1]; ?></strong></h4>
                  </li>
                  <li data-target=“#myCarousel” data-slide-to=“2” class=“list-group-item” style=“background-color: silver;”>
                     <h4><strong><?php echo $data[7][1]; ?></strong></h4>
                  </li>
                  <li data-target=“#myCarousel” data-slide-to=“3” class=“list-group-item” style=“background-color: silver;”>
                     <h4><strong><?php echo $data[8][1]; ?></strong></h4>
                  </li>
                  <li data-target=“#myCarousel” data-slide-to=“4” class=“list-group-item” style=“background-color: silver;”>
                     <h4><strong><?php echo $data[9][1]; ?></strong></h4>
                  </li>
                  <li data-target=“#myCarousel” data-slide-to=“4” class=“list-group-item” style=“background-color: silver;”>
                     <h4><strong><?php echo $data[10][1]; ?></strong></h4>
                  </li>
               </ul>
               <!– Controls –>
               <div class=“carousel-controls”>
                  <a class=“left carousel-control” href=“#myCarousel” data-slide=“prev”>
                  <span class=“glyphicon glyphicon-chevron-left”></span>
                  </a>
                  <a class=“right carousel-control” href=“#myCarousel” data-slide=“next”>
                  <span class=“glyphicon glyphicon-chevron-right”></span>
                  </a>
               </div>
            </div>
            <!– End Carousel –>
         </div>
      </div>
      <!– Carosal End–>
      <div class=“container-fluid” style=“background-color: ghostwhite;background-image: url(‘img/elec1.jpg’);”>
         <div class=“row”>
            <!– Division 2–>
            <div class=“col-sm-12” style=“background-color: black;color: ghostwhite;opacity: 0.9;”>
               <h1  style=“text-align: center;margin-top: 0.1em;padding-top: 0.5em;”>Recent Events</h1>
               <br>
               <br>
               <ul style=“margin-bottom: 0em;padding-left: 1.5em;”>
                  <li class=“hidden” style=“list-style-type: none;”>
                     <div class=“row”>
                        <div class=“col-sm-8” >
                           <h2><?php echo $data[1][1];?></h2>
                           <h4><?php echo $data[1][2];?></h4>
                           <h4><?php echo $data[1][4];?></h4>
                        </div>
                        <div class=“col-sm-4” >
                           <img src=“<?php echo $data[1][3];?>” class=“img-circle” alt=“Cinque Terre” width=“170” height=“170” style=“margin-left: 18%;”>
                       </div>
                     </div>
                     <hr style=“border-style: dashed;”>
                  </li>
                  <li class=“hidden” style=“list-style-type: none;”>
                     <div class=“row”>
                        <div class=“col-sm-8” >
                           <h2><?php echo $data[2][1];?></h2>
                           <h4><?php echo $data[2][2];?></h4>
                           <h4><?php echo $data[2][4];?></h4>
                        </div>
                        <div class=“col-sm-4” >
                           <img src=“<?php echo $data[2][3];?>” class=“img-circle” alt=“Cinque Terre” width=“200” height=“200” style=“margin-left: 14%;”>
                       </div>
                     </div>
                     <hr style=“border-style: dashed;”>
                  </li>
                  <li class=“hidden” style=“list-style-type: none;margin-bottom:0.1em;padding-bottom:0.2em;”>
                     <div class=“row”>
                        <div class=“col-sm-8” >
                           <h2><?php echo $data[3][1];?></h2>
                           <h4><?php echo $data[3][2];?></h4>
                           <h4><?php echo $data[3][4];?></h4>
                        </div>
                        <div class=“col-sm-4” >
                           <img src=“<?php echo $data[3][3];?>” class=“img-circle” alt=“Cinque Terre” width=“220” height=“220” style=“margin-left: 12%;”>
                       </div>
                     </div>
                     <hr style=“border-style: dashed;”>
                  </li>
               </ul>
               <a href=“#” style=“text-align: end;”>
                  <h2>View all…</h2>
               </a>
            </div>
         </div>
      </div>
      <!– Division 3–>
      <div style=“background-image: url(‘img/elec3.png’);”>
         <div class=“container-fluid” style=“background-color: #FFD96A; opacity:0.9;”>
            <div class=“row”>
               <div class=“col-sm-12”  >
                  <h1 style=“text-align:center;margin-top: 0.1em;padding-top: 0.5em;”>About Us</h1>
               </div>
            </div>
            <div class=“row”>
               <div class=“col-sm-8” >
                  <h1><?php echo $data[12][0];?></h1>
                  <h2><?php echo $data[12][1];?></h2>
                  <div class=“row”>
                     <div class=“col-sm-12” style=“padding-left: 20%;”>
                        <h4><?php echo $data[12][2];?>  <a href=“#”>Read More </a></h4>
                     </div>
                  </div>
               </div>
               <div class=“col-sm-4” >
                  <img src=“https://i1.wp.com/cepd.in/images/gadresir.jpg?resize=250%2C250” class=“img-circle” alt=“Cinque Terre” width=“250” height=“250” style=“margin-left: 10%;”>
              </div>
            </div>
            <div class=“centerify” style=“color: green;font-size: 4em;font-family: ‘Vollkorn’, serif;text-align: center;”>~~~</div>
            <div class=“row”>
               <div class=“col-sm-4 border” style=“text-align: center;padding: 1em;”>
                  <a href=“#” target=“_blank”><img src=“http://via.placeholder.com/100X100” style=“height: 7em;”></a>
                  <h4 style=“color: #00695c;”>Name 1 <br> Designation<br>Work discription</h4>
               </div>
               <div class=“col-sm-4 border” style=“text-align: center;padding: 1em;”>
                  <a href=“#” target=“_blank”><img src=“http://via.placeholder.com/100X100” style=“height: 7em;”></a>
                  <h4 style=“color: #00695c;”>Name 2 <br> Designation<br>Work discription</h4>
               </div>
               <div class=“col-sm-4” style=“text-align: center;padding: 1em;”>
                  <a href=“#” target=“_blank”><img src=“http://via.placeholder.com/100X100” style=“height: 7em;”></a>
                  <h4 style=“color: #00695c;”>Name 3 <br> Designation<br>Work discription</h4>
               </div>
            </div>
            <a href=“#” style=“text-align: end;”>
               <h2>Our Team…</h2>
            </a>
         </div>
      </div>
      <!– ///////////////////////////////////////////////////////////////////////////Main page end ///////////////////////////////////////////////////–>
      <div>
         <a href=“#” class=“scrollToTop” style=“display: none;height: ;height: 4em;padding: 0px;width: 6em;margin: 0px;”><img src=“img/top.png” width=50% ></a>
      </div>
      <footer class=“footer p-t-1”>
         <div class=“container”>
            <nav class=“navbar” style=“background:transparent; color: black;”>
               <div class=“row”>
                  <div class=“col-xs-8 h6”>
                     <h1 style=“color: whitesmoke;opacity: 0.6;margin-top: 0px;”>CEDT</h1>
                  </div>
                  <div class=“col-xs-4”>
                     <h2 style=“color: whitesmoke;opacity:0.6;margin-top:10px”>© 2017 cedtnsit.in</h2>
                  </div>
               </div>
            </nav>
         </div>
      </footer>
   </body>
   <script>
      $(document).ready(function(){
          var $window=$(window);       
         function checkWidth(){
              if ($window.width() <= 700) {
                  $(‘#div1-3’).removeClass(‘col-xs-1’).addClass(‘col-xs-0’);
                  $(‘#div1-3’).remove();
                  $(‘#div1-3’).detach();
                  $(‘#div1-1’).removeClass(‘col-xs-1’).addClass(‘col-xs-2’);
                  $(‘#title’).removeClass(‘decMargin’);
                  $(‘#areaofwork’).removeClass(‘decMargin’);
                  $(‘#relatedlinks’).removeClass(‘decMargin’);
                 }
                 else{
                     $(‘#div1-1_link’).remove();
                     $(‘#title’).addClass(‘decMargin’);
                       
                    //$(‘#mob-progress-bar’).remove();
                 };
                
         }
          checkWidth();
          $(window).resize(checkWidth);
             var sideslider = $(‘[data-toggle=collapse-side]’);
                 var sel = sideslider.attr(‘data-target’);
                 var sel2 = sideslider.attr(‘data-target-2’);
                 sideslider.click(function(event){
                     $(sel).toggleClass(‘in’);
                     $(sel2).toggleClass(‘out’);
                 });
                     var clickEvent = false;
         $(‘#myCarousel’).carousel({
             interval:   4000    
         }).on(‘click’, ‘.list-group li’, function() {
                 clickEvent = true;
                 $(‘.list-group li’).removeClass(‘active’);
                 $(this).addClass(‘active’);     
         }).on(‘slid.bs.carousel’, function(e) {
             if(!clickEvent) {
                 var count = $(‘.list-group’).children().length -1;
                 var current = $(‘.list-group li.active’);
                 current.removeClass(‘active’).next().addClass(‘active’);
                 var id = parseInt(current.data(‘slide-to’));
                 if(count == id) {
                     $(‘.list-group li’).first().addClass(‘active’);
                }
             }
             clickEvent = false;
         });
         $(“ul li.hidden”).each(function(i) {
          $(this).delay(1500 * i).queue(function(nxt) {
          $(this).removeClass(‘hidden’);
          nxt();
       });
          $(window).scroll(function (event) {
         var scroll = $(window).scrollTop();
         console.log(scroll);
         // Do something
           });
          $(window).scroll(function(){
         if ($(this).scrollTop() > 100) {
           $(‘.scrollToTop’).fadeIn();
         } else {
           $(‘.scrollToTop’).fadeOut();
         }
       });
       
       //Click event to scroll to top
       $(‘.scrollToTop’).click(function(){
         $(‘html, body’).animate({scrollTop : 0},1000);
         return false;
       });
      });
      });
      $(window).load(function() {
         var boxheight = $(‘#myCarousel .carousel-inner’).innerHeight();
         var itemlength = $(‘#myCarousel .item’).length;
         var triggerheight = Math.round(boxheight/itemlength+1);
         $(‘#myCarousel .list-group-item’).outerHeight(triggerheight);
      });
   </script>
</html>

 

Backend Overview

 

Backend sections integrates database, google sheets in our case with the main website template. It’s main purpose is to:
  • FETCH DATA
    • In our model, data is fetched from google sheets in CSV format.
  • VERIFY DATA
    • After extracting data, it needs to be checked for removal of malicious code snippets to improve code reliability and security. Thus, avoiding XSS attacks.
  • PUBLISH CONTENT
    • In our template data is published by php’s ‘ECHO’ command embedded in the their respective locations.

 

CORRESPONDING CODE:

 

<?php
   $url = “https://docs.google.com/spreadsheets/d/e/2PACX-1vQWvKmJQrt3-DpE5-8b8zu9rXe4DF7DpTq8JMUYQAukLDR_hwAKGpJK9sUMB62CvXXk7N4hIc9MJGya/pub?gid=0&single=true&output=csv”;
   
   $data = get_csv_content($url);
   
   $is_valid = validate_data($data);
   
 $data_to_publish = array(0,0,0,0);      
   function get_csv_content($spreadsheet_url){
     if(!ini_set(‘default_socket_timeout’, 15))
    echo “<!– unable to change socket timeout –>”;
     if (($handle = fopen($spreadsheet_url, “r”)) !== FALSE) {
       while (($data = fgetcsv($handle, 1000, “,”)) !== FALSE) {
         $spreadsheet_data[] = $data;
       }
       fclose($handle);
       return $spreadsheet_data;
     }
   }
   
   function validate_data($data){
   remove_html_tags($data);
     return true;
   }
   function remove_html_tags($data_to_publish){
     $data_to_publish[0]=(int)strip_tags($data[0]);
     $data_to_publish[1]=(int)strip_tags($data[1]);
     $data_to_publish[2]=(int)strip_tags($data[2]);
     $data_to_publish[3]=(int)strip_tags($data[3]);
     return true;
   }
   ?>
Untitled Diagram.png
Experimental Results and Conclusion
working link: here

 

  1. Website Desktop Version Screenshots
Screenshot from 2017-10-29 16:53:35.png
Screenshot from 2017-10-29 16:54:12.png
2.  Website Mobile Version Screenshots
                          

 

WhatsApp Image 2017-10-28 at 4.39.01 PM (2).jpeg
                        
  1. Website Performance Test Results
Screenshot-2017-10-29 Pingdom Tools.png
 

Project is Open Source at : Github
Screenshot-2017-10-29 Pingdom Tools(1).png

 

References

 

  5. https://www.w3schools.com/php/default.asp  
  6. https://material.io/guidelines/style/color.html#
  7. 81.4.107.225/cedtnsit.in/
Tagged , , , , , ,

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.