Tema: ayuda con tutorial
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 09/03/2011, 12:52
Derzz
 
Fecha de Ingreso: enero-2011
Mensajes: 112
Antigüedad: 13 años, 3 meses
Puntos: 4
Respuesta: ayuda con tutorial
codigos
index.php
Código PHP: 
Ver original
  1. <?php
  2. session_start();
  3.  
  4.  
  5. function loginForm(){
  6. echo
  7. '<div id="loginform">
  8. <form action="index.php" method="post">
  9. <p>Please enter your name to continue:</p>
  10. <label for="name">Name:</label>
  11. <input type="text" name="name" id="name" />
  12. <input type="submit" name="enter" id="enter" value="Enter" />
  13. </form>
  14. </div>'
  15. ;
  16. }
  17.  
  18. if(isset($_POST['enter'])){
  19. if($_POST['name'] != ""){
  20. $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
  21. }
  22. else{
  23. echo '<span class="error">Please type in a name</span>';
  24. }
  25. }
  26. //desloguea
  27. if(isset($_GET['logout'])){
  28.  
  29. //Mensaje simple de salida
  30. $fp = fopen("log.html", 'a');
  31. fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");
  32. fclose($fp);
  33.  
  34. session_destroy();
  35. header("Location: index.php"); //Redirige al usuario
  36. }
  37.  
  38. //fin desloguea
  39. ?>
  40.  
  41.  
  42.  
  43. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  44. <html xmlns="http://www.w3.org/1999/xhtml">
  45. <head>
  46. <title>Chat - Customer Module</title>
  47. <link type="text/css" rel="stylesheet" href="style.css" />
  48. </head>
  49.  
  50. <?php
  51. if(!isset($_SESSION['name'])){
  52. loginForm();
  53. }
  54. else{
  55. ?>
  56. <div id="wrapper">
  57. <div id="menu">
  58. <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
  59. <p class="logout"><a id="exit" href="#">Exit Chat</a></p>
  60. <div style="clear:both"></div>
  61. </div>
  62. <div id="chatbox"><?php
  63. if(file_exists("log.html") && filesize("log.html") > 0){
  64. $handle = fopen("log.html", "r");
  65. $contents = fread($handle, filesize("log.html"));
  66. fclose($handle);
  67.  
  68. echo $contents;
  69. }
  70. ?></div>
  71. <form name="message" action="">
  72. <input name="usermsg" type="text" id="usermsg" size="63" />
  73. <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
  74. </form>
  75. </div>
  76.  
  77.  
  78. <script type="text/javascript" src="jquery.min.js"></script>
  79. <script type="text/javascript">
  80.  
  81. $(document).ready(function(){
  82. //Si el usuario quiere dejar la sesión
  83. $("#exit").click(function(){
  84. var exit = confirm("¿Está seguro que desea finalizar la sesión?");
  85. if(exit==true){window.location = 'index.php?logout=true';}
  86. });
  87. //enviar en log de mensaje
  88. $("#submitmsg").click(function(){
  89. var clientmsg = $("#usermsg").val();
  90. $.post("post.php", {text: clientmsg});
  91. $("#usermsg").attr("value", "");
  92. return false;
  93. });
  94. //Carga el archivo que contiene el log de chat
  95. function loadLog(){//Inicio de loadLog
  96. var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //La altura del scroll antes de la petición
  97. $.ajax({//Inicio ajax
  98. url: "log.html",
  99. cache: true,
  100. success: function(html){//Inicio del success
  101. $("#chatbox").html(html); //Inserta el log de chat en el div #chatbox
  102. //Auto-scroll
  103. var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //La altura del scroll después del pedido
  104. if(newscrollHeight > oldscrollHeight){//inicio del if verificar scroll
  105. $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll hacia el fondo del div
  106. }//Fin del if verificar scroll
  107. }//Fin del success
  108. });//Fin ajax
  109. }//Fin de loadLog
  110. //Recarga el archivo cada 2500 ms o x ms si deseas cambiar el segundo parámetro
  111. setInterval (loadLog, 2500);
  112. });//fin del Jquery
  113.  
  114.  
  115. </script>
  116. <?php
  117. }
  118. ?>
  119.  
  120.  
  121.  
  122.  
  123.  
  124. </body>
  125. </html>

post.php
Código PHP: 
Ver original
  1. <?
  2. session_start();
  3. if(isset($_SESSION['name'])){
  4. $text = $_POST["text"];
  5.  
  6. $fp = fopen("log.html", 'a');
  7. fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
  8. fclose($fp);
  9. }
  10. ?>

style.css

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3. /* CSS Document */
  4. body {
  5. font:12px arial;
  6. color: #222;
  7. text-align:center;
  8. padding:35px; }
  9.  
  10. form, p, span {
  11. margin:0;
  12. padding:0; }
  13.  
  14. input { font:12px arial; }
  15.  
  16. a {
  17. color:#0000FF;
  18. text-decoration:none; }
  19.  
  20. a:hover { text-decoration:underline; }
  21.  
  22. #wrapper, #loginform {
  23. margin:0 auto;
  24. padding-bottom:25px;
  25. background:#EBF4FB;
  26. width:504px;
  27. border:1px solid #ACD8F0; }
  28.  
  29. #loginform { padding-top:18px; }
  30.  
  31. #loginform p { margin: 5px; }
  32.  
  33. #chatbox {
  34. text-align:left;
  35. margin:0 auto;
  36. margin-bottom:25px;
  37. padding:10px;
  38. background:#fff;
  39. height:270px;
  40. width:430px;
  41. border:1px solid #ACD8F0;
  42. overflow:auto; }
  43.  
  44. #usermsg {
  45. width:395px;
  46. border:1px solid #ACD8F0; }
  47.  
  48. #submit { width: 60px; }
  49.  
  50. .error { color: #ff0000; }
  51.  
  52. #menu { padding:12.5px 25px 12.5px 25px; }
  53.  
  54. .welcome { float:left; }
  55.  
  56. .logout { float:right; }
  57.  
  58. .msgln { margin:0 0 2px 0; }