KLiK SocialMediaWebsite
velopment Release
Project Abandoned. Este projeto foi abandonado e pode estar desatualizado com os padrões atuais e com relação à segurança e recursos etc. posso renovar esse projeto no futuro, mas não há um desenvolvimento mais planejado no momento.
O KLIK é um sistema de pool de informações baseado em PHP (ou simplesmente um site de mídia social), consistindo de um sistema completo de login/registro, sistema de perfil de usuário, sala de bate -papo, sistema de fórum e sistema de blog/pesquisas/gerenciamento de eventos.
Todos esses requisitos podem ser concluídos de uma só vez, simplesmente instalando uma pilha de servidores como
WampouXamppetc.
Importe o arquivo klik_database.sql na pasta includes em phpmyadmin. Não há necessidade de nenhuma alteração no arquivo .SQL. Isso criará o banco de dados necessário para que o aplicativo funcione.
Edite o arquivo dbh.inc.php na pasta includes para criar a conexão do banco de dados. Altere a senha e o nome de usuário para aqueles que estão sendo usados na instalação atual do phpMyAdmin . Não há necessidade de mudar mais nada.
$ 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 ());
}O número da porta não precisa ser alterado em circunstâncias normais, mas se você estiver enfrentando um problema ou a pilha do servidor estiver instalada em outra porta, fique à vontade para alterá -la, mas faça isso com cuidado.
email-server.php na pasta includes e altere as variáveis de acordo:$SMTPuser : endereço de e -mail no gmail$SMTPpwd : endereço de e -mail SenhaSMTPtitle : nome da empresa hipotéticaDomain : Domínio do site, como localhost no servidor local ou se no domínio ao vivo, algo como www.hypothetheticwebsite.com $ SMTPuser = ' [email protected] ' ;
$ SMTPpwd = ' some-example-password ' ;
$ SMTPtitle = " KLiK inc. " ;
$ Domain = ' localhost ' ;Esta etapa é principalmente para configurar uma conta de email para ativar o
password reset systemcontacte senha, que exigem correspondência.
Na fase atual do aplicativo, apenas as contas
Gmailsão suportadas.
O arquivo de banco de dados já contém muitos dados de amostra e usuários. A maioria dos usuários no banco de dados tem a mesma senha que seus nomes de usuário, exceto alguns. Não é possível se inscrever como administrador por meio do aplicativo, pois decidimos que era uma fraqueza explorável. Portanto, você precisará criar uma conta e ir manualmente para a tabela users no banco de dados para alterar o nível do usuário dessa conta para 1 de 0 .
0 nível significa um usuário normal e nível 1 significa administrador
Uma maneira simples de acessar todas as contas de amostra sem excluí -las e, portanto, perder todos os dados da amostra é alterar manualmente seu email de PhpMyadmin para um endereço de email válido. Em seguida, tente fazer o login com essa conta usando uma senha errada e use a forgot password? link para redefinir a senha da conta. O email da conta pode ser alterado com segurança novamente para qualquer coisa trivial posteriormente.
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)
Isso foi usado para criar um
mail servernoWindows localhost, pois, diferentemente do Linux, não há um instalado no Windows. Este plug -in foi usado para o envio e recebimento de e -mails no host local e não é necessário em um domínio ao vivo
Detalhes de características importantes do aplicativo
O painel fornece uma interface central para a maioria dos recursos do aplicativo. O User profile card no canto superior esquerdo da tela fornece um resumo do perfil, bem como um link para o perfil e a página de edição do perfil. O botão Criador no canto superior direito fornece um link proeminente para a página da equipe, que mostra os KLiK Creators .
A interface de 4 guias no centro fornece acesso a Forums , Blogs , Polls e Events latest ou mais recentemente criados recentemente. Os componentes mostram as características individuais dos respectivos elementos, como upvotes totais para um fórum, likes de um blog, votes para uma pesquisa e days remaining para eventos. Existem mais 2 botões, que vão para os KLiK Forums (a interface central para os fóruns) e o KLiK Hub (a interface central para o blog, pesquisa e sistema de gerenciamento de eventos).
Forum System :
Blog Management System :
Like o sistema em blogs (os usuários podem gostar do blog ou remover seus semelhantes) Event Management System :
Poll Management System :
O KLIK suporta um sistema completo de login/registro e perfil de usuário. Na startup, o aplicativo mostra opções para fazer login, inscrição ou entrar em contato com o administrador do site por e -mail. Cada usuário pode fazer um nome de usuário exclusivo que não pode ser alterado posteriormente. As passwords do usuário são hashed antes de armazenar no banco de dados, para que mesmo os administradores também não tenham acesso às senhas originais. Informações adicionais do usuário incluem Full Name , email , Profile Image , Profile Headline , Gender e Bio .
Há também um Password Recovery System segura que permite ao usuário redefinir suas senhas de maneira segura. O aplicativo gera links de token criptografados temporários com um certo tempo de vencimento que, quando usado pelos avisos do usuário, para alterar a senha. Como isso também requer senha atual, o processo é seguro e tem menores chances de exploração.
O aplicativo usa vários métodos de autenticação para se inscrever e fazer login. Ele verifica empty fields , wrong username , wrong password , SQL errors , server errors e, em caso de inscrição, corrupted image ou erros wrong image type
Klik possui um User profile system . Cada usuário recebe um perfil para se inscrever, com o qual o usuário pode criar fóruns, blogs, eventos etc. e interagir com os recursos do aplicativo. O nome completo do usuário, a manchete e a biografia, bem como a imagem do perfil, são opcionais, o que significa que qualquer pessoa pode se inscrever sem defini -las. Nesse caso, o usuário receberá uma imagem padrão do usuário e a manchete, a biografia e o nome completo estarão vazios.
O user profile pode ser acessado através da opção no menu Configurações na barra de navegação ou, mais simplesmente, clicando na imagem do usuário no cartão de perfil do usuário, que está presente no canto superior esquerdo da tela do aplicativo na maioria das páginas. A página de perfil mostra as informações básicas do usuário como nome de usuário, nome completo, gênero, manchete e biografia. Além disso, ele mostra os diferentes Forums e Blogs que o usuário criou junto com as Polls nas quais ele/ela participou. Se o usuário não tiver feito nada disso ou é novo, a página mostra um pequeno gato de bongão com uma legenda 'vazia' para lembrá -lo de que você precisa ser mais ativo :)
Há também um Profile Editing System que permite ao usuário editar suas informações de perfil. Ele pode ser acessado através da respectiva opção no menu Configurações na barra de navegação ou simplesmente clicando no ícone de lápis ao lado da imagem do perfil do usuário no cartão de perfil. O sistema permite que o usuário altere a maior parte de suas informações, exceto o nome de usuário, que não pode ser alterado. Todos os campos já possuem as informações atuais; portanto, o usuário não precisa digitar tudo de novo se ele quiser editar ligeiramente as informações atuais. A senha também pode ser alterada, no entanto, apenas fornecendo a senha atual para reter uma interface mais segura.
Klik também possui uma caixa de bate-papo, que usa PHP & AJAX para conversar em tempo real com outros usuários. A seção à esquerda é uma lista de todos os usuários atualmente no site, enquanto a tela de bate -papo certa é para exibir as mensagens de argola e saída. Um usuário pode acessar um bate -papo com um determinado usuário clicando nele na lista de usuários, que recuperará todas as mensagens de bate -papo do banco de dados. As mensagens de engate e saída são estilizadas de maneira diferente para manter a legibilidade. A conversa é feita em tempo real, sem a necessidade de atualizar a página continuamente.
Possíveis melhorias :
optimization : todas as mensagens de um bate -papo são recuperadas de uma só vez, e isso pode causar atrasos se o bate -papo for grande. Isso pode ser corrigido pela implementação da carga incremental de mensagens para carregar apenas as mensagens que estão sendo exibidas na tela.user search : Um recurso de pesquisa pode ser implementado na lista de usuários para pesquisar diretamente um usuário específico, economizando tempo. Password hashing antes de armazenar no banco de dados.
A redefinição de senha feita por meio de encrypted tokens criados individualmente enviados por e -mail como forma de um link. Os tokens têm uma certa data de validade, após a qual não podem ser usados.
Filtragem de informações obtidas dos métodos $_GET e $_POST para evitar header injection .
Implementação de MySQLi Prepared Statements para segurança de banco de dados avançada .
Exemplo:
$ 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 );
}Uma lista de todos os principais recursos do aplicativo e seus respectivos arquivos de front-end e back-end.
| Recurso | Arquivos front-end | Arquivos de back-end |
|---|---|---|
| Painel | index.php (Main Dashboard) , Forum.php , Hub.php | N / D |
| Sistema de fórum | 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 pesquisa | poll.php , polls.php , poll-voters.php | create-poll.inc.php , delete-poll.inc.php , poll.class.php , post-vote.inc.php |
| Sala de bate -papo | message.php | post_message_ajax.php , get_message_ajax.php , script.js |
| Inscrição/ login | signup.php , login.php | signup.inc.php , login.inc.php , logout.inc.php |
| Sistema de perfil | profile.php , edit-profile.php | profileUpdate.inc.php |
| Redefinição de senha | reset-pwd.php , create-new-pwd.php | reset-request.inc.php |
| Upload de imagem | N / D | upload.inc.php |
| Vitrine do criador | team.php , KLiK_anas-imran.php , KLiK_anas-kamal.php , KLiK_saad.php , KLiK_ubaid.php | N / D |
| Encontrando usuários | users-view.php | N / D |
Nota: Os arquivos da GUI estão no
root directorye osbackend filesestão presentes na pastaincludes. Da mesma forma, todos os arquivos CSS e JS estão presentes em seus diretórioscssejsde prefeitos. Somente os arquivos do Criador na_KLiK Creators foldertêm seus próprios arquivos CSS. Os principais arquivos de estruturação HTML são oHTML-head.phpeHTML-footer.php, que também residem na pasta inclui
LaravelVue.js para a sala de bate -papo.Se você gostou do meu trabalho, mostre apoio estrelando o repositório! Significa muito para mim, e é tudo que estou pedindo.
Um enorme agradecimento à equipe maravilhosa, sem a qual todo esse projeto não teria sido possível. Confira nossos perfis e estrela nossos repositórios! :)
 |  |  |  |
|---|---|---|---|
| MSAAD1999 | Skamal16 | Ubaidasim | Aitasadduq |
