Tuesday, September 27, 2011

Baseball Chat

I'm using MAMP and liking it.

styles.css

body {
    background-image: url('../images/background.png');
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10pt;
    color: white;
    margin-top: 10px;
}

.messagePanel {
    position: absolute;
    top: 95px;
    left: 420px;
    padding: 15px 15px 15px 15px;
    color: black;
}

.inputPanel {
    overflow: auto;
    background: white;
    padding: 10px 10px 10px 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
}

.outputPanel {
    background: white;
    height: 317px;
    width: 528px;
    overflow: auto;
    padding: 15px 15px 15px 15px;
    -moz-border-radius: 10px;
}

.buttonBar {
    position: absolute;
    top: 65px;
    left: 15px;
}

.roster {
    background: white;
    color: black;
}

chat.html

<!DOCTYPE html>
<html>
  <head>
      <title>Let's Go BlueSox!</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <link href='stylesheets/styles.css' rel='stylesheet' type='text/css' />
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  </head>
  <body>
 
      <img src='images/logo_990x80.png' width='990' height='80' />
      <p>Loading ...</p>

      <div class='messagePanel'>
          <div id='messages' class='inputPanel'>
              <input type='text' id='author' placeholder='Name' size='10'/>
              <input type='text' id='contents' placeholder='Your Message' size='57'/>
              <input type='button' id='sendButton' value='Send'/>
          </div>
          <div class='outputPanel'>
              <div id='roster' class='panel'></div>
          </div>
      </div>

      <script type="text/javascript">

      $(document).ready(function() {
          $('p').text('Ready');

          $('#sendButton').click(function() { 
              sendMessage();
          });
            
          var sendMessage = function() {
              var author = $('#author').val();
              var contents = $('#contents').val();
          
              var data = "author=" + escape(author) + "&contents=" + escape(contents);
           
              if (author != '' && contents != '') {
                  $('#roster').append( author + ':' + contents + '<br/>');
                
                  $('#contents').val("");
                  $('#contents').focus();
    
                  $('p').text('Sending');

                  $.ajax({
                      type: 'POST',
                      url: 'post_message.php',
                      data: data,
                      success: $('p').text('Success')
                  });
              }
          }
      });
      </script>

    </body>
</html>

post_message.php

<?php
    $link = mysql_connect('localhost','root','root') or die('Cannot connect to the DB');
    mysql_select_db('ChatterDB',$link) or die('Cannot select the DB');

    $author = $_POST["author"];
    $contents = $_POST["contents"];

    $sql='INSERT INTO messages (author, contents)
    VALUES
    ("' . $author . '","' . $contents . '")';
    
    if (!mysql_query($sql,$link)) {
        die('Error: ' . mysql_error());
    }
    
    mysql_close($link);
    
    //sleep(5);
?>
To use MAMP's MySQL from the command line, use the following command: 
[~] /Applications/MAMP/Library/bin/mysql -u root --password=root
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 53
Server version: 5.5.9 Source distribution

Copyright (c) 2000, 2010, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| ChatterDB          |
| mysql              |
| performance_schema |
+--------------------+
4 rows in set (0.03 sec)

mysql>
at