Web site Development beginners

Discussion in 'Programmer's Corner' started by daljeet795, Jul 11, 2018.

  1. daljeet795

    Thread Starter New Member

    Jul 2, 2018
    Hello Everyone
    I am sorry if this post is not suitable on this forum. I wanted to develop one website. I know it's not very task. I use Eclipse tool on Windows 10. I was looking website projects including server side (java program) and client side(html, css , java script ) for practicing. I didn't found website project in my search.

    I am following tutorials and watching video on youtube. I am looking advice How to start learning. I have two way
    1. Get the example code and run on eclipse
    2. Break big task into small parts
    Get the example code and run on eclipse : I already have tried this method but I didn't found website project

    Break big task into small parts : Is it best to make some button's in html and write server code to activate buttons

    I am also following tutorials and watching video on youtube. I am trying do best but your advice can point me in right direction

    Thanks in advance
  2. JohnInTX


    Jun 26, 2012
    MrSoftware likes this.
  3. daljeet795

    Thread Starter New Member

    Jul 2, 2018
    many many thanks JohnInTX, I am not asking for any links or tutorials. I am already following some of tutorials.

    I want to run one complete web site program in eclipse on my Desktop so I can get simple idea and easily figure out client and server program
    1. Should I have run sample code on eclipse? I already have tried this method but I didn't found complete website project. It's very easy to find client side code but it's very difficult to get both client and server side code together in one project.

    2. Break big task into small parts : Is it best to write server side program in small part like look at this link https://www.w3schools.com/w3css/tryw3css_templates_pizza.htm there is only code for client side and now if I want to write code server side then how to start by Break big task into small parts

    I explain two way I am looking advice on which one to follow What is best way according to you ?
  4. wayneh


    Sep 9, 2010
    I'm having trouble understanding your goals. You are asking about specific software tools but not so much the job you want to accomplish.

    I have not used the tools you are describing, but I have developed multiple websites. Only my first efforts decades ago involved hosting a website on a local server. It's easier and more economical to use a hosting service. I happen to use Godaddy for my sites but there are many other options, and I believe you can even find free ones. The electricity consumption alone is justification for paying for the hosting service. They additionally do all the work to maintain reliable service and offer many tools for scripting your website. But you can certainly run a local server if you want. Macs run Apache by default. I'm not sure what Windows offers.

    My experience learning this stuff was one step at a time. Get a server running, figure out how to show an html page, add an input field to that html page, and on and on. Then you learn website management software and how to use FTP to synch with your website files. You learn how to use a SQL database an php to manage users and access control. The learning never ends. If you expect to do this as a career (which I did not), it would be worth your time to take some classes and learn this stuff at a deeper level.
    daljeet795 likes this.
  5. daljeet795

    Thread Starter New Member

    Jul 2, 2018
    I want to make one website.. i'm not asking only for specif tool. I just mentioned the tool and programming language that i'm gonna use to make website.

    I can use any server and database but I use apache tomcat and MySQL Database..

    I am just confusing with one step at one time.That's what i am asking here. I make it simple what I am asking.

    I haven't written this code. it's just example. This is code for client side
    Code (Text):
    2. <!DOCTYPE html>
    3. <html>
    4. <title>W3.CSS Template</title>
    5. <meta charset="UTF-8">
    6. <meta name="viewport" content="width=device-width, initial-scale=1">
    7. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    8. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC">
    9. <style>
    10. body, html {height: 100%}
    11. body,h1,h2,h3,h4,h5,h6 {font-family: "Amatic SC", sans-serif}
    12. .menu {display: none}
    13. .bgimg {
    14.     background-repeat: no-repeat;
    15.     background-size: cover;
    16.     background-image: url("/w3images/pizza.jpg");
    17.     min-height: 90%;
    18. }
    19. </style>
    20. <body>
    22. <!-- Navbar (sit on top) -->
    23. <div class="w3-top w3-hide-small">
    24.   <div class="w3-bar w3-xlarge w3-black w3-opacity w3-hover-opacity-off" id="myNavbar">
    25.     <a href="#" class="w3-bar-item w3-button">HOME</a>
    26.     <a href="#menu" class="w3-bar-item w3-button">MENU</a>
    27.     <a href="#about" class="w3-bar-item w3-button">ABOUT</a>
    28.     <a href="#googleMap" class="w3-bar-item w3-button">CONTACT</a>
    29.   </div>
    30. </div>
    32. <!-- Header with image -->
    33. <header class="bgimg w3-display-container w3-grayscale-min" id="home">
    34.   <div class="w3-display-bottomleft w3-padding">
    35.     <span class="w3-tag w3-xlarge">Open from 10am to 12pm</span>
    36.   </div>
    37.   <div class="w3-display-middle w3-center">
    38.     <span class="w3-text-white w3-hide-small" style="font-size:100px">thin<br>CRUST PIZZA</span>
    39.     <span class="w3-text-white w3-hide-large w3-hide-medium" style="font-size:60px"><b>thin<br>CRUST PIZZA</b></span>
    40.     <p><a href="#menu" class="w3-button w3-xxlarge w3-black">Let me see the menu</a></p>
    41.   </div>
    42. </header>
    44. <!-- Menu Container -->
    45. <div class="w3-container w3-black w3-padding-64 w3-xxlarge" id="menu">
    46.   <div class="w3-content">
    48.     <h1 class="w3-center w3-jumbo" style="margin-bottom:64px">THE MENU</h1>
    49.     <div class="w3-row w3-center w3-border w3-border-dark-grey">
    50.       <a href="javascript:void(0)" onclick="openMenu(event, 'Pizza');" id="myLink">
    51.         <div class="w3-col s4 tablink w3-padding-large w3-hover-red">Pizza</div>
    52.       </a>
    53.       <a href="javascript:void(0)" onclick="openMenu(event, 'Pasta');">
    54.         <div class="w3-col s4 tablink w3-padding-large w3-hover-red">Salads</div>
    55.       </a>
    56.       <a href="javascript:void(0)" onclick="openMenu(event, 'Starter');">
    57.         <div class="w3-col s4 tablink w3-padding-large w3-hover-red">Starter</div>
    58.       </a>
    59.     </div>
    61.     <div id="Pizza" class="w3-container menu w3-padding-32 w3-white">
    62.       <h1><b>Margherita</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$12.50</span></h1>
    63.       <p class="w3-text-grey">Fresh tomatoes, fresh mozzarella, fresh basil</p>
    64.       <hr>
    66.       <h1><b>Formaggio</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$15.50</span></h1>
    67.       <p class="w3-text-grey">Four cheeses (mozzarella, parmesan, pecorino, jarlsberg)</p>
    68.       <hr>
    70.       <h1><b>Chicken</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$17.00</span></h1>
    71.       <p class="w3-text-grey">Fresh tomatoes, mozzarella, chicken, onions</p>
    72.       <hr>
    74.       <h1><b>Pineapple'o'clock</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$16.50</span></h1>
    75.       <p class="w3-text-grey">Fresh tomatoes, mozzarella, fresh pineapple, bacon, fresh basil</p>
    76.       <hr>
    78.       <h1><b>Meat Town</b> <span class="w3-tag w3-red w3-round">Hot!</span><span class="w3-right w3-tag w3-dark-grey w3-round">$20.00</span></h1>
    79.       <p class="w3-text-grey">Fresh tomatoes, mozzarella, hot pepporoni, hot sausage, beef, chicken</p>
    80.       <hr>
    82.       <h1><b>Parma</b> <span class="w3-tag w3-grey w3-round">New</span><span class="w3-right w3-tag w3-dark-grey w3-round">$21.50</span></h1>
    83.       <p class="w3-text-grey">Fresh tomatoes, mozzarella, parma, bacon, fresh arugula</p>
    84.     </div>
    86.     <div id="Pasta" class="w3-container menu w3-padding-32 w3-white">
    87.       <h1><b>Lasagna</b> <span class="w3-tag w3-grey w3-round">Popular</span> <span class="w3-right w3-tag w3-dark-grey w3-round">$13.50</span></h1>
    88.       <p class="w3-text-grey">Special sauce, mozzarella, parmesan, ground beef</p>
    89.       <hr>
    91.       <h1><b>Ravioli</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$14.50</span></h1>
    92.       <p class="w3-text-grey">Ravioli filled with cheese</p>
    93.       <hr>
    95.       <h1><b>Spaghetti Classica</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$11.00</span></h1>
    96.       <p class="w3-text-grey">Fresh tomatoes, onions, ground beef</p>
    97.       <hr>
    99.       <h1><b>Seafood pasta</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$25.50</span></h1>
    100.       <p class="w3-text-grey">Salmon, shrimp, lobster, garlic</p>
    101.     </div>
    104.     <div id="Starter" class="w3-container menu w3-padding-32 w3-white">
    105.       <h1><b>Today's Soup</b> <span class="w3-tag w3-grey w3-round">Seasonal</span><span class="w3-right w3-tag w3-dark-grey w3-round">$5.50</span></h1>
    106.       <p class="w3-text-grey">Ask the waiter</p>
    107.       <hr>
    109.       <h1><b>Bruschetta</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$8.50</span></h1>
    110.       <p class="w3-text-grey">Bread with pesto, tomatoes, onion, garlic</p>
    111.       <hr>
    113.       <h1><b>Garlic bread</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$9.50</span></h1>
    114.       <p class="w3-text-grey">Grilled ciabatta, garlic butter, onions</p>
    115.       <hr>
    117.       <h1><b>Tomozzarella</b> <span class="w3-right w3-tag w3-dark-grey w3-round">$10.50</span></h1>
    118.       <p class="w3-text-grey">Tomatoes and mozzarella</p>
    119.     </div><br>
    121.   </div>
    122. </div>
    124. <!-- About Container -->
    125. <div class="w3-container w3-padding-64 w3-red w3-grayscale w3-xlarge" id="about">
    126.   <div class="w3-content">
    127.     <h1 class="w3-center w3-jumbo" style="margin-bottom:64px">About</h1>
    128.     <p>The Pizza Restaurant was founded in blabla by Mr. Italiano in lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    129.     <p><strong>The Chef?</strong> Mr. Italiano himself<img src="/w3images/chef.jpg" style="width:150px" class="w3-circle w3-right" alt="Chef"></p>
    130.     <p>We are proud of our interiors.</p>
    131.     <img src="/w3images/onepage_restaurant.jpg" style="width:100%" class="w3-margin-top w3-margin-bottom" alt="Restaurant">
    132.     <h1><b>Opening Hours</b></h1>
    134.     <div class="w3-row">
    135.       <div class="w3-col s6">
    136.         <p>Mon & Tue CLOSED</p>
    137.         <p>Wednesday 10.00 - 24.00</p>
    138.         <p>Thursday 10:00 - 24:00</p>
    139.       </div>
    140.       <div class="w3-col s6">
    141.         <p>Friday 10:00 - 12:00</p>
    142.         <p>Saturday 10:00 - 23:00</p>
    143.         <p>Sunday Closed</p>
    144.       </div>
    145.     </div>
    147.   </div>
    148. </div>
    150. <!-- Contact (with google maps) -->
    151. <div id="googleMap" class="w3-grayscale-max" style="width:100%;height:400px;"></div>
    153. <div class="w3-container w3-padding-64 w3-blue-grey w3-grayscale-min w3-xlarge">
    154.   <div class="w3-content">
    155.     <h1 class="w3-center w3-jumbo" style="margin-bottom:64px">Contact</h1>
    156.     <p>Find us at some address at some place or call us at 05050515-122330</p>
    157.     <p><span class="w3-tag">FYI!</span> We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggerst criteria of them all, both look and taste.</p>
    158.     <p class="w3-xxlarge"><strong>Reserve</strong> a table, ask for today's special or just send us a message:</p>
    159.     <form action="/action_page.php" target="_blank">
    160.       <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" required name="Name"></p>
    161.       <p><input class="w3-input w3-padding-16 w3-border" type="number" placeholder="How many people" required name="People"></p>
    162.       <p><input class="w3-input w3-padding-16 w3-border" type="datetime-local" placeholder="Date and time" required name="date" value="2017-11-16T20:00"></p>
    163.       <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Message \ Special requirements" required name="Message"></p>
    164.       <p><button class="w3-button w3-light-grey w3-block" type="submit">SEND MESSAGE</button></p>
    165.     </form>
    166.   </div>
    167. </div>
    169. <!-- Footer -->
    170. <footer class="w3-center w3-black w3-padding-48 w3-xxlarge">
    171.   <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
    172. </footer>
    174. <!-- Add Google Maps -->
    175. <script>
    176. function myMap()
    177. {
    178.   myCenter=new google.maps.LatLng(41.878114, -87.629798);
    179.   var mapOptions= {
    180.     center:myCenter,
    181.     zoom:12, scrollwheel: false, draggable: false,
    182.     mapTypeId:google.maps.MapTypeId.ROADMAP
    183.   };
    184.   var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
    186.   var marker = new google.maps.Marker({
    187.     position: myCenter,
    188.   });
    189.   marker.setMap(map);
    190. }
    192. // Tabbed Menu
    193. function openMenu(evt, menuName) {
    194.   var i, x, tablinks;
    195.   x = document.getElementsByClassName("menu");
    196.   for (i = 0; i < x.length; i++) {
    197.      x[i].style.display = "none";
    198.   }
    199.   tablinks = document.getElementsByClassName("tablink");
    200.   for (i = 0; i < x.length; i++) {
    201.      tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
    202.   }
    203.   document.getElementById(menuName).style.display = "block";
    204.   evt.currentTarget.firstElementChild.className += " w3-red";
    205. }
    206. document.getElementById("myLink").click();
    207. </script>
    208. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
    209. <!--
    210. To use this code on your website, get a free API key from Google.
    211. Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
    212. -->
    214. </body>
    215. </html>
    Now I have to write server code for above website I can write in any language (c++, python, java, C#). I chose java

    How to start writing code server code for above website. I need advice on How to start one step at one time ?
    Last edited: Jul 13, 2018
  6. wayneh


    Sep 9, 2010
    So you need your server to be able to run javascript such as the Google code starting in line #174?

    Take a look here and here.
  7. daljeet795

    Thread Starter New Member

    Jul 2, 2018
    Thanks for all your valuable suggestion. Web application can have two broad parts: the frontend and the backend. I understand front-end is like what we see on browser. Basically we use html, css, javascript, bootstrap etc in client side

    I did google search " Back end Developer". I visited some of links to understand role of back end developer for web application. It run on server side. Basically we use server side language such as c++, python, java, C#

    I found out that if we don't write back end code then button's on header (Top of wbsite) will not work. User can't log-in to access website.

    What happen if we don't write back end code or What happen if we write back end code
    Last edited: Jul 13, 2018
  8. bertus


    Apr 5, 2008
    MrSoftware likes this.
  9. daljeet795

    Thread Starter New Member

    Jul 2, 2018
    Thanks bertus for providing link. I already have seen that page. it's for front end and I am looking advice on back end code

    It would be appreciate if someone can explain little bit why the back end code is important in web application.

    What we can do with help of back end code in web application ?
  10. bertus


    Apr 5, 2008
  11. wayneh


    Sep 9, 2010
    That's not entirely true - it depends on what you program the buttons to do. If you can live with html functionality, you won't need anything special to run on the server. Personally, I've also used php for database chores and access control for users, because I could not achieve these functions with html alone. I chose php because virtually every hosting company provides it and because I was able to find examples and tutorials covering the topics that I was interested in. I'm sure I could have gotten there with java as well but it seemed like a bigger learning curve at the time.
  12. daljeet795

    Thread Starter New Member

    Jul 2, 2018
    This is simple front end code
    Code (Text):
    1. <!DOCTYPE html>
    2. <html>
    3. <body>
    5. <h2>Welcome</h2>
    6. <button type="button">Home</button>
    7. <button type="button">Manu</button>
    8. <button type="button">About</button>
    9. <button type="button">contect</button>
    10. </body>
    11. </html>
    When I run this code on browser It show four buttons


    Now can you give me idea.

    What I can do for four buttons with back end code?

    Do I really need back end code for above buttons ?
  13. wayneh


    Sep 9, 2010
    Here's an html page that I use to get user credentials. My website will throw this at the user if they attempt to access a protected page without a sessions established. Note how it shows a button that will execute php scripting when pressed.

    Code (Text):
    2.   <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
    3.     "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
    4.   <html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
    5.   <head>
    6.     <title> Please Log In for Access </title>
    7.     <meta http-equiv="Content-Type"
    8.       content="text/html; charset=iso-8859-1" />
    9.   </head>
    10.   <body>
    11.   <h1> Login Required </h1>
    12.   <p>You must log in to access this area of the site.</p>
    13.   <p>If you are not a registered user, <a href="a sign-up sheet">click here</a>
    14.      to sign up for access!</p>
    15.   <p><form method="post" action="<?=$_SERVER['PHP_SELF']?>">
    16. <!--    User ID: <input type="text" name="uid" size="8" /><br />
    17.         Password: <input type="password" name="pwd" SIZE="8" /><br />
    18.     <input type="submit" value="Log in" />  -->
    19. <p></p>
    20.     <label for="username">Username: </label><input id="username" type="text" name="uid" value="<?php if(isset($_COOKIE["remember_me"])) echo $_COOKIE["remember_me"]; ?>"/>
    21.     <label for="password">Password: </label><input id="password" type="password" name="pwd"/>
    22.     <input type="hidden" name="redir" value="<?= $_REQUEST['redir'] ?>"/>
    23.     <input type="submit" value="Login"/>
    24.     <div id="remember"><label>Remember Me?<input type="checkbox" name="setcookie" <?php if(isset($_COOKIE["remember_me"])) echo 'checked="checked"'; ?>/></label></div>
    25.   </form></p>
    26. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    27. </body>
    28. </html>
    Here's the code that precedes that html:
    Code (Text):
    2. <?php
    3. /////////////////////////////////////////////////
    4. function error($msg) {
    5.     ?>
    6.     <html>
    7.     <head>
    8.     <script language="JavaScript">
    9.         alert("<?=$msg?>");
    10.         history.go(-1);
    11.     </script>
    12.     </head>
    13.     <body>
    14.     </body>
    15.     </html>
    16.     <?php
    17.     exit;
    18. }
    19. /////////////////////////////////////////////////
    21. //// Check for credentials in the just-posted form or an existing session
    22. $uid = isset($_POST['uid']) ? $_POST['uid'] : $_SESSION['uid'];
    23. $pwd = isset($_POST['pwd']) ? $_POST['pwd'] : $_SESSION['pwd'];
    25. if(!isset($uid)) {   //// No credentials
    26.   ?>  html above
  14. MrSoftware

    Senior Member

    Oct 29, 2013
    For your back end one popular language is PHP, it's a server side scripting language that is supported by most common servers such as Apache. You can write with many different styles, but REST (RESTful) is a popular way to go, depending on what you want to do. Look at POST and GET for getting data to and from the server. Then look at integrating a database, such as MySQL.

    Look for an integrated server, such as a LAMP (Linux, Apache, MySQL, PHP) package. This will have everything wrapped up into a turnkey solution. Run it in a virtual machine to simulate a remote server.

    If you like eclipse as an editor then great, but server side code will run on the server, so eclipse will be little more than a text editor.
    Last edited: Jul 13, 2018
    daljeet795 likes this.