KLiK SocialMediaWebsite
velopment Release
Project Abandoned. Este proyecto ha sido abandonado y podría estar desactualizado con los estándares actuales y con respecto a la seguridad y las características, etc.. Puedo renovar este proyecto en el futuro, pero no hay más desarrollo planeado en este momento.
Klik es un sistema de grupo de información basado en PHP (o simplemente un sitio web de redes sociales), que consiste en un sistema completo de inicio de sesión/registro, sistema de perfil de usuario, sala de chat, sistema de foro y sistema de blog/encuestas/gestión de eventos.
Todos estos requisitos se pueden completar a la vez simplemente instalando una pila de servidor como
WampoXamppetc.
Importe el archivo klik_database.sql en la carpeta includes en phpMyAdmin. No hay necesidad de ningún cambio en el archivo .sql. Esto creará la base de datos requerida para que la aplicación funcione.
Edite el archivo dbh.inc.php en la carpeta includes para crear la conexión de la base de datos. Cambie la contraseña y el nombre de usuario a los que se utilizan dentro de la instalación actual de phpMyAdmin . No hay necesidad de cambiar nada más.
$ serverName = " localhost " ;
$ dBUsername = " root " ;
$ dBPassword = " examplePassword " ;
$ dBName = " klik_database " ;
$ conn = mysqli_connect ( $ serverName , $ dBUsername , $ dBPassword , $ dBName , 3307 );
if (! $ conn )
{
die ( " Connection failed: " . mysqli_connect_error ());
}El número de puerto no necesita cambiarse en circunstancias normales, pero si se encuentra con un problema o la pila del servidor está instalada en otro puerto, no dude en cambiarlo, pero hágalo con cuidado.
email-server.php en la carpeta includes y cambie las variables en consecuencia:$SMTPuser : dirección de correo electrónico en gmail$SMTPpwd : contraseña de dirección de correo electrónicoSMTPtitle : nombre hipotético de la empresaDomain : dominio del sitio web, como localhost en el servidor local o si en el dominio en vivo, algo como www.hypotheticalwebsite.com $ SMTPuser = ' [email protected] ' ;
$ SMTPpwd = ' some-example-password ' ;
$ SMTPtitle = " KLiK inc. " ;
$ Domain = ' localhost ' ;Este paso es principalmente para configurar una cuenta de correo electrónico para habilitar el
password reset systemcontacty contraseña, todo lo cual requiere correo.
En la etapa actual de la aplicación, solo son compatibles con las cuentas
Gmail.
El archivo de la base de datos ya contiene muchos datos de muestra y usuarios. La mayoría de los usuarios en la base de datos tienen la misma contraseña que sus nombres de usuario, excepto algunos. No es posible registrarse como administrador a través de la aplicación, ya que decidimos que era una debilidad explotable. Por lo tanto, deberá crear una cuenta e ir manualmente a la tabla users en la base de datos para cambiar el nivel de usuario de esa cuenta a 1 desde 0 .
0 nivel significa un usuario normal y nivel 1 significa administrador
Una forma simple de acceder a todas las cuentas de muestra sin eliminarlas y, por lo tanto, perder todos los datos de la muestra es cambiar manualmente su email desde PhPMyAdmin a una dirección de correo electrónico válida. Luego, intente iniciar sesión con esa cuenta utilizando una contraseña incorrecta y use la forgot password? link para restablecer la contraseña de cuentas. El correo electrónico de la cuenta se puede cambiar de forma segura nuevamente a cualquier cosa trivial más adelante.
PHP 5.6.40
SQL 14.0
JavaScript ES 6
HTML5
CSS3
WampServer Stack 3.0.6
Windows 10
MySQL Database 8.0.13
phpMyAdmin 4.8.3
MySQLi APIs
JQuery v3.3.1
BootStrap v4.2.1
AJAX
[PHPMailer 6.0.6](https://github.com/PHPMailer/PHPMailer)
Esto se utilizó para crear un
mail serverenWindows localhost, ya que, a diferencia de Linux, no hay uno ya instalado en Windows. Este complemento se utilizó para enviar y recibir correos electrónicos en localhost, y no es necesario en un dominio en vivo
Detalles de las características importantes de la aplicación
El tablero proporciona una interfaz central para la mayoría de las características de la aplicación. La User profile card en la esquina superior izquierda de la pantalla proporciona un resumen de perfil, así como un enlace al perfil y la página de edición de perfil. El botón Creador en la esquina superior derecha proporciona un enlace destacado a la página del equipo, que muestra a los KLiK Creators .
La interfaz 4 de pestaña en el centro proporciona acceso a latest Forums , Blogs , Polls y Events creados recientemente. Los componentes muestran las características individuales de los elementos respectivos, como upvotes totales totales para un foro, likes para un blog, votes para una encuesta y days remaining para los eventos. Hay 2 botones más, que van a los KLiK Forums (la interfaz central para los foros) y el KLiK Hub (la interfaz central para el blog, encuestas y gestión de eventos).
Forum System :
Blog Management System :
Like el sistema en blogs (a los usuarios les puede gustar el blog o eliminar su similar) Event Management System :
Poll Management System :
Klik admite un sistema completo de inicio de sesión/registro y perfil de usuario. En el inicio, la aplicación muestra opciones para iniciar sesión, registrarse o contactar al administrador del sitio web por correo electrónico. Cada usuario puede hacer un nombre de usuario único que no se puede cambiar más adelante. Las passwords de los usuarios se hashed antes de almacenar en la base de datos, por lo que incluso los administradores no tienen acceso a las contraseñas originales también. La información adicional del usuario incluye Full Name , email , Profile Image , Profile Headline , Gender y Bio .
También hay un Password Recovery System que permite al usuario restablecer sus contraseñas de manera segura. La aplicación genera enlaces de token cifrados temporales con un cierto tiempo de vencimiento que cuando el usuario usa solicita cambiar la contraseña. Dado que eso también requiere una contraseña actual, el proceso es seguro y tiene menores posibilidades de explotación.
La aplicación utiliza varios métodos de autenticación para registrarse e iniciar sesión. Comprueba empty fields , wrong username , wrong password , SQL errors , server errors y en caso de registrarse, corrupted image o errores wrong image type
Klik tiene un User profile system completo. A cada usuario se le asigna un perfil al registrarse, con el cual el usuario puede crear foros, blogs, eventos, etc. e interactuar con las características de la aplicación. El nombre completo del usuario, el titular y la biografía, así como la imagen de perfil son opcionales, lo que significa que cualquiera puede registrarse sin configurarlos. En ese caso, al usuario se le asignará una imagen de usuario predeterminada y el titular, el biografía y el nombre completo estarán vacíos.
Se puede acceder al user profile a través de la opción en el menú Configuración en la barra de navegación, o más simplemente, haciendo clic en la imagen del usuario en la tarjeta de perfil de usuario, que está presente en la esquina superior izquierda de la pantalla de la aplicación en la mayoría de las páginas. La página de perfil muestra la información básica del usuario como nombre de usuario, nombre completo, género, titular y biografía. Aparte de eso, muestra los diferentes Forums y Blogs que el usuario ha creado junto con las Polls en las que ha participado. Si el usuario no ha hecho nada de eso o es nuevo, la página muestra un lindo gato de bongo con un título 'tan vacío' para recordarle que debe ser más activo :)
También hay un Profile Editing System que permite al usuario editar su información de perfil. Se puede acceder a través de la opción respectiva en el menú Configuración en la barra de navegación o simplemente haciendo clic en el icono del lápiz junto a la imagen de perfil de usuario en la tarjeta de perfil. El sistema permite al usuario cambiar la mayor parte de su información, excepto el nombre de usuario, que no se puede cambiar. Todos los campos ya tienen la información actual, por lo que el usuario no tiene que escribir todo nuevamente si solo desea editar ligeramente la información actual. Sin embargo, la contraseña también se puede cambiar solo al proporcionar la contraseña actual para retener una interfaz más segura.
Klik también tiene un chatbox, que utiliza PHP y AJAX para chat en tiempo real con otros usuarios. La sección de la izquierda es una lista de todos los usuarios actualmente en el sitio web, mientras que la pantalla de chat correcta es para mostrar los mensajes de ingreso y salientes. Un usuario puede acceder a un chat con cierto usuario haciendo clic en él/ella en la lista de usuarios, que recuperará todos los mensajes de chat de la base de datos. Los mensajes de ingreso y salientes se diseñan de manera diferente para mantener la legibilidad. El chat se realiza en tiempo real, sin la necesidad de actualizar la página continuamente.
Posibles mejoras :
optimization : todos los mensajes de un chat se recuperan a la vez, y esto puede causar retrasos si el chat es grande. Esto se puede solucionar implementando una carga incremental de mensajes para cargar solo los mensajes que se muestran en la pantalla.user search : se puede implementar una función de búsqueda en la lista de usuarios para buscar directamente a un usuario en particular, ahorrando así el tiempo. Password hashing antes de almacenar en la base de datos.
Restablecer la contraseña realizada a través de encrypted tokens creados individualmente enviados por correo electrónico como forma de un enlace. Los tokens tienen una cierta fecha de vencimiento después de la cual no se pueden usar.
Filtrado de información obtenida de los métodos $_GET y $_POST para evitar header injection .
Implementación de MySQLi Prepared Statements para la seguridad de la base de datos avanzada .
Ejemplo:
$ sql = " select uidUsers from users where uidUsers=?; " ;
$ stmt = mysqli_stmt_init ( $ conn );
if (! mysqli_stmt_prepare ( $ stmt , $ sql ))
{
header ( " Location: ../signup.php?error=sqlerror " );
exit ();
}
else
{
mysqli_stmt_bind_param ( $ stmt , " s " , $ userName );
mysqli_stmt_execute ( $ stmt );
mysqli_stmt_store_result ( $ stmt );
}Una lista de todas las características principales de la aplicación y sus respectivos archivos frontales y de fondo.
| Característica | Archivos front-end | Archivos de fondo |
|---|---|---|
| Panel | index.php (Main Dashboard) , Forum.php , Hub.php | N / A |
| Sistema de foro | categories.php , create-category , topics.php , create-topic.php , posts.php | create-category.inc.php , create-topic.inc.php , delete-category.php , delete-forum.php , delete-post.php |
| Sistema de blog | blog-page.php , blogs.php , create-blog | blog-vote.inc.php , create-blog.inc.php |
| Sistema de eventos | event-page.php , events.php , create-event.php | create-event.inc.php |
| Sistema de votación | poll.php , polls.php , poll-voters.php | create-poll.inc.php , delete-poll.inc.php , poll.class.php , post-vote.inc.php |
| Sala de chat | message.php | post_message_ajax.php , get_message_ajax.php , script.js |
| Registrarse/ Iniciar sesión | signup.php , login.php | signup.inc.php , login.inc.php , logout.inc.php |
| Sistema de perfil | profile.php , edit-profile.php | profileUpdate.inc.php |
| Restablecer la contraseña | reset-pwd.php , create-new-pwd.php | reset-request.inc.php |
| Carga de imágenes | N / A | upload.inc.php |
| Escaparate del creador | team.php , KLiK_anas-imran.php , KLiK_anas-kamal.php , KLiK_saad.php , KLiK_ubaid.php | N / A |
| Encontrar usuarios | users-view.php | N / A |
Nota: Los archivos GUI están en el
root directory, y losbackend filesestán presentes en la carpetaincludes. Del mismo modo, todos los archivos CSS y JS están presentes en sus directorioscssyjs. Solo los archivos de creadores en la_KLiK Creators foldertienen sus propios archivos CSS. Los principales archivos de estructuración HTML sonHTML-head.phpyHTML-footer.php, que también residen en la carpeta INCUCES
LaravelVue.js para la sala de chat.Si le gustó mi trabajo, ¡muestre soporte protagonizando el repositorio! Significa mucho para mí, y es todo lo que estoy pidiendo.
Muchas gracias al maravilloso equipo sin el cual todo este proyecto no hubiera sido posible. ¡Mira nuestros perfiles y protagonizan nuestros reposos! :)
 |  |  |  |
|---|---|---|---|
| MSAAD1999 | skamal16 | Ubaidasim | aitasadduq |
