Jump to content

KenBrace

Active Members
  • Content Count

    58
  • Joined

  • Last visited

  • Days Won

    3

Reputation Activity

  1. Like
    KenBrace got a reaction from Coolprogramer36 in Anyone here use Notepad++?   
    When it comes to web design Notepad++ is the best code editor out there in my opinion. The formatting, auto-correct, etc. are great. Some editors overdo the auto-formatting and try to predict your every move which can be quite annoying. Notepad++ is perfect though.
  2. Like
    KenBrace got a reaction from Coolprogramer36 in How to create a live chat box   
    This will be a guide on how to create a basic chat box with live feed. The technologies used will be HTML, CSS, PHP, & Javascript. We will also be using a little jQuery. If you do not have at least a basic understanding of these languages then you'll have a hard time understanding this tutorial.
     
    The first thing you will need to do is set up the database.
     
    Create a database table titled "chat". Give it the following structure.
     
    id INT(11) NOT NULL AUTO_INCREMENT
    message VARCHAR(255) NOT NULL
    time_sent DATETIME NOT NULL
     
    Give the table a primary key of "id".
     
    If you have any questions about this just post here in the thread and ask. I'll help you out if I can.
     
    Once you've done this you will need to create your main page. I'm calling mine "chatbox.php". Use the source code below...
     
    chatbox.php
    <!DOCTYPE html>   <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> //access jquery <style> #chatBoxContainer { height: 500px; width: 500px; padding-top: 1%; box-shadow: 5px 5px 10px #000; background: #ccc; } #chatBox { height: 90%; width: 95%; margin-left: 2.5%; background: #f7f7f7; } #chatMessage { height: auto; width: 95%; margin-left: 2.5%; } #userBox { height: auto; width: 95%; margin-left: 2.5%; margin-top: 10px; } textarea { height: 16px; width: 87.5%; resize: none; } input { float: right; } </style> <script> //this runs the fetch_chat function every 3 seconds to check for new messages $(document).ready(function(){ setInterval(fetch_chat, 3000); }); //this function fetches messages from the database and echos them into the chat box if there are new ones function fetch_chat(){ var hr = new XMLHttpRequest(); var url = "fetch_chat.php"; hr.open("POST", url, true); hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); hr.onreadystatechange = function(){ if(hr.readyState == 4 && hr.status == 200){ var text = hr.responseText; $('chatBox').html(text); } } hr.send(); } //this submits chat messages sent by the user function submit_chat(){ var message = $('textarea').val(); var hr = new XMLHttpRequest(); var url = "fetch_chat.php"; var data = "message="+message+"&submit_chat=Submit"; hr.open("POST", url, true); hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); hr.onreadystatechange = function(){ if(hr.readyState == 4 && hr.status == 200){ var text = hr.responseText; if(text == 0){ alert('There was an error submitting the message!'); } else { var content = $('#chatBox').html(); $('#chatBox').html(content+text); } } } hr.send(data); } </script> </head> <body> <div id='chatBoxContainer'> <div id='chatBox'>   </div> <div id='userBox'> <textarea></textarea> <input type='submit' value='Enter' onClick="submit_chat()"> //when this button is clicked the "submit_chat()" function is fired </div> </div> </body> </html> Now that you have that file in place you need to create the php parser for submitting the chat messages. See below.
     
    submit_chat.php
    <?php   $time = date("Y-m-d H:i:s"); //this var equals the current time   if(isset($_POST['submit_chat'])){ //ensure that a request was sent before running the code $message = $_POST['message']; //this variable holds the message data sent by the user   $sql = "INSERT INTO chat (message, time_sent) VALUES ('$message', '$time')"; //variable holding our sql command $query = mysqli_query($conn, $sql); //initiate the query and specify both the connection and the command if(!$query){ //check for errors echo "0"; } else { echo "<div id='chatMessage'>$message</div>"; //echo the message back to the main page } }   ?> Good job. Next you need to create the php file that will check for new messages.
     
    fetch_chat.php
    <?php   $sql = "SELECT * FROM chat"; //command $query = mysqli_query($conn, $sql); //initiate query while($row = mysqli_fetch_array($query)){ //run a while loop that fetches an array from the database $message = $row['message']; //message data $time_sent = $row['time_sent']; //the time that the message was sent   echo "<div id='chatMessage'>$message</div>"; //echo the message back to the main file for displaying } //Keep in mind that this while loop will run for every message in the database and send them all back to the main file via the ajax request ?> Excellent. Now try it out and see how it works. Let me know if you find any bugs. You can modify the css and whatever else you like to fit your own needs. Enjoy!
  3. Like
    KenBrace reacted to Nathan in Anyone want to team up & build something?   
    I do have something in mind, but wasn't exactly sure on how to program it, I'll send you a PM.
  4. Like
    KenBrace got a reaction from queenbellevue in YouTube or Vimeo?   
    If I'm going to upload a video I choose YouTube. Why? Because it's what most people use and it's somewhat of the standard video platform. It's where most people are and it's where everyone is used to watching videos.
     
    That's the advantage of becoming number one. Being #1 in itself makes you even more popular. You're the best because you're the best which exponentially grows your business.
  5. Like
    KenBrace reacted to digitalsatori in [FREE] Live Chatbox Application - KenBox 1.0   
    This is so cool!  Thank you for sharing!
  6. Like
    KenBrace got a reaction from Nathan in Is HTML/CSS/JScript the best start for a beginner?   
    This is so true. Math has become much, much easier since I started programming. I am able to think more logically about every aspect of life really.
     
    "Everyone should learn to program because it teaches you how to think." -Bill Gates
  7. Like
    KenBrace reacted to Nathan in Link building. How do you do it ?   
    Google your topic, from there find articles on the first say 10 pages of Google.  Go through and post quality comments with links back to your site.  As long as they are not spam they will usually be left or approved by the site owner.
  8. Like
    KenBrace reacted to protoboard in Have you ever made a website with C# programming?   
    I haven't but of course it is possible. Check out this tutorials to do what you are looking for: ASP.NET Web Examples in C# and VB.
  9. Like
    KenBrace reacted to Nathan in How many SQL queries are too much?   
    I've seen 40+ on pages that still load quickly. I don't think the number of queries matter, but how many rows are in the tables and how efficient it's written.
  10. Like
    KenBrace got a reaction from pandabear1991 in Where do I start?   
    Well you don't really need knowledge of programming to run a forum.
     
    That's why there are forum software packages like vBulletin, IPBoard, and myBB.
     
    You will need to know a bit about how servers work so you know how to upload the software files, etc.
     
    For starters you need a domain name and a web host.
     
    You will also need to choose and download the forum software of your choice.
     
    Once you've done this you should log into your control panel on your web host and find the ftp login details.
     
    Download an ftp client like FileZilla and use the login info in your web host control panel to log into the server with the ftp client.
     
    Once you are logged in you should see the directory with all its root files like "public_html", "www", etc.
     
    Upload the contents of the "upload" folder that came with your forum software to the "public_html" folder. Some web hosts use a different name for the root like "www".
     
    Once it has finished uploading (it will take 15 minutes or so depending on how fast your internet is) go to your website's address and an installation page should pop up. Run through the installation and your forum is ready to go!
     
    Then you begin the hard part. Creating a community!
     
    Shoot me a PM or post here if you have any questions or need help. I'd be willing to help you get the site uploaded and installed if you aren't able to figure it out.
  11. Like
    KenBrace got a reaction from Nathan in How to do CSS width calculation with jQuery   
    The CSS "calc()" function is great for giving an element a width based on a percentage of its parent's width plus or minus a certain amount of pixels.
     
    Example
     
     
    .this_class { width: calc(100% - 10px); }  
    The above example gives the element a width of 100% of its parent width minus 10px.
     
    But the "calc()" function doesn't work across all browsers yet (i.e. Opera). So how can this be solved?
     
    Using jQuery is the answer. Below is a code example of how to do accomplish this.
     
     
    <div id='parent'> <div id='child'>   </div> </div>  
    Let's say I want the div with an ID or "child" to be 90% of its parent width, plus 20px. You can do this with the following jQuery code...
     
     
    $("#child").css("width", $("#parent").width() - 10% + 20px);  
    In the above example I first accessed the "child" element's css width property.
     
    I then set the width by accessing the width of the "parent" and then subtracting 10% and adding 20px.
     
    Hope this helps!
  12. Like
    KenBrace got a reaction from digitalsatori in [FREE] Live Chatbox Application - KenBox 1.0   
    KenBox 1.0 - Chat Box Application

     

    Free & Opensource

     

    I created a thread here with some files for a live chat box programming tutorial but it had a few bugs that needed to be worked out. So I did a bit of work and not only perfected it but I added a bit of functionality as well. Feel 'free' (no pun intended) to download the source files attached to this thread and let me know what you think. I've tested it and found no bugs but I could have missed something so let me know if you see any errors. If you would like to use it for a website you can alter the styling to fit your own needs.

     

    KenBox 1.0.zip
  13. Like
    KenBrace reacted to Nathan in How to create a live chat box   
    Maybe show the connection file used.  I don't show it in your code or any include config file.
    mysqli_query($conn, $sql);
  14. Like
    KenBrace reacted to Nathan in How to create private messaging system with multiple participants?   
    I would do something like this:
    convo id convo createDate convoOwnerID messages id convoID message createDate messageOwnerID convoParticipants id userID convoID hasRead
  15. Like
    KenBrace got a reaction from Nathan in How to create a live chat box   
    This will be a guide on how to create a basic chat box with live feed. The technologies used will be HTML, CSS, PHP, & Javascript. We will also be using a little jQuery. If you do not have at least a basic understanding of these languages then you'll have a hard time understanding this tutorial.
     
    The first thing you will need to do is set up the database.
     
    Create a database table titled "chat". Give it the following structure.
     
    id INT(11) NOT NULL AUTO_INCREMENT
    message VARCHAR(255) NOT NULL
    time_sent DATETIME NOT NULL
     
    Give the table a primary key of "id".
     
    If you have any questions about this just post here in the thread and ask. I'll help you out if I can.
     
    Once you've done this you will need to create your main page. I'm calling mine "chatbox.php". Use the source code below...
     
    chatbox.php
    <!DOCTYPE html>   <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> //access jquery <style> #chatBoxContainer { height: 500px; width: 500px; padding-top: 1%; box-shadow: 5px 5px 10px #000; background: #ccc; } #chatBox { height: 90%; width: 95%; margin-left: 2.5%; background: #f7f7f7; } #chatMessage { height: auto; width: 95%; margin-left: 2.5%; } #userBox { height: auto; width: 95%; margin-left: 2.5%; margin-top: 10px; } textarea { height: 16px; width: 87.5%; resize: none; } input { float: right; } </style> <script> //this runs the fetch_chat function every 3 seconds to check for new messages $(document).ready(function(){ setInterval(fetch_chat, 3000); }); //this function fetches messages from the database and echos them into the chat box if there are new ones function fetch_chat(){ var hr = new XMLHttpRequest(); var url = "fetch_chat.php"; hr.open("POST", url, true); hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); hr.onreadystatechange = function(){ if(hr.readyState == 4 && hr.status == 200){ var text = hr.responseText; $('chatBox').html(text); } } hr.send(); } //this submits chat messages sent by the user function submit_chat(){ var message = $('textarea').val(); var hr = new XMLHttpRequest(); var url = "fetch_chat.php"; var data = "message="+message+"&submit_chat=Submit"; hr.open("POST", url, true); hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); hr.onreadystatechange = function(){ if(hr.readyState == 4 && hr.status == 200){ var text = hr.responseText; if(text == 0){ alert('There was an error submitting the message!'); } else { var content = $('#chatBox').html(); $('#chatBox').html(content+text); } } } hr.send(data); } </script> </head> <body> <div id='chatBoxContainer'> <div id='chatBox'>   </div> <div id='userBox'> <textarea></textarea> <input type='submit' value='Enter' onClick="submit_chat()"> //when this button is clicked the "submit_chat()" function is fired </div> </div> </body> </html> Now that you have that file in place you need to create the php parser for submitting the chat messages. See below.
     
    submit_chat.php
    <?php   $time = date("Y-m-d H:i:s"); //this var equals the current time   if(isset($_POST['submit_chat'])){ //ensure that a request was sent before running the code $message = $_POST['message']; //this variable holds the message data sent by the user   $sql = "INSERT INTO chat (message, time_sent) VALUES ('$message', '$time')"; //variable holding our sql command $query = mysqli_query($conn, $sql); //initiate the query and specify both the connection and the command if(!$query){ //check for errors echo "0"; } else { echo "<div id='chatMessage'>$message</div>"; //echo the message back to the main page } }   ?> Good job. Next you need to create the php file that will check for new messages.
     
    fetch_chat.php
    <?php   $sql = "SELECT * FROM chat"; //command $query = mysqli_query($conn, $sql); //initiate query while($row = mysqli_fetch_array($query)){ //run a while loop that fetches an array from the database $message = $row['message']; //message data $time_sent = $row['time_sent']; //the time that the message was sent   echo "<div id='chatMessage'>$message</div>"; //echo the message back to the main file for displaying } //Keep in mind that this while loop will run for every message in the database and send them all back to the main file via the ajax request ?> Excellent. Now try it out and see how it works. Let me know if you find any bugs. You can modify the css and whatever else you like to fit your own needs. Enjoy!
  16. Like
    KenBrace reacted to Nathan in Hello from USA! Ken here.   
    Welcome to the board Ken, thanks for the couple of guides so far!
  17. Like
    KenBrace reacted to Nathan in Anyone here use Notepad++?   
    More intuitive interface and code coloring, it's a full IDE.
     
    Also on any save it uploads to FTP, I can clone from GIT, commit to GIT etc...all from the program.
     
    https://www.jetbrains.com/phpstorm/
  18. Like
    KenBrace got a reaction from Nathan in How to use Ajax to retrieve data from PHP file without jQuery   
    This is a basic tutorial on how to retrieve information from a php parser using Ajax without jQuery.
     
    This is very useful when you wish to check if a user exists, check for live chat messages, etc.
     
    Javascript
    <script> function send(){ var hr = new XMLHttpRequest(); //this variable represents your ajax request var url = "parser.php"; //the url to your php parser hr.open("POST", url, true); //initiate the ajax request hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //set the request header hr.onreadystatechange = function(){ if(hr.readyState == 4 && hr..status == 200){ //this code checks whether or not the request has fully processed and returned valid var text = hr.responseText; //this is the text sent back from the php file alert(text); //you can do whatever you wish with the response text } } hr.send(); } </script> PHP (short example)
    <?php echo "this text will be retrieved using Ajax"; ?>
×
×
  • Create New...