Jump to content

Creating a unique page for every user using PHP PDO and MySQL


kraken523
 Share

Go to solution Solved by phppup,

Recommended Posts

I've started a to-do app, and everything works fine. Every user has his own unique to-do items that he can add. The only issue is that when I log-in with a user, ALL the items of all users are displayed when I'm redirect to my main page. I want to make it as so every user has his own page where only the to-do items he has created are visible, not every item from every user. I'm a total beginner with PHP so I'm sorry if this is a stupid question.

This is my todomain.php code

<?php
require 'db_conn.php';
require 'config.php';
session_start(); 
   
// If the session variable is empty, this  
// means the user is yet to login 
// User will be sent to 'login.php' page 
// to allow the user to login 
if (!isset($_SESSION['id'])) { 
    $_SESSION['msg'] = "You have to log in first"; 
    header('location: login.php'); 
} 
   
// Logout button will destroy the session, and 
// will unset the session variables 
// User will be headed to 'login.php' 
// after loggin out 
if (isset($_GET['logout'])) { 
    session_destroy(); 
    unset($_SESSION['id']); 
    header("location: login.php"); 
} 


?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<link rel="stylesheet" href="css/bootstrap-grid.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<a href="index.php?logout='1'" style="color: black;"> 
                    Click here to Logout 
                </a> 
 <?php if (isset($_SESSION['success'])) : ?> 
            <div class="error success" > 
                <h3> 
                    <?php
                        echo $_SESSION['success'];  
                        unset($_SESSION['success']); 
                        echo $_SESSION["username"]
                    ?> 
                </h3> 
            </div> 
        <?php endif ?> 

<title>TODO App</title>
<script src="https://kit.fontawesome.com/d72928d9b9.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container m-5 p-2 rounded mx-auto bg-light shadow">
    <!-- App title section -->
    <div class="row m-1 p-4">
        <div class="col">
            <div class="p-1 h1 text-primary text-center mx-auto display-inline-block">
                <i class="fa fa-check bg-primary text-white rounded p-2"></i>
                <u>My Todo-s</u>
            </div>
        </div>
    </div>
    <!-- Create todo section -->
  <form action="app/add.php" method="POST" autocomplete="off">
    <div class="row m-1 p-3">
        <div class="col col-11 mx-auto">
            
            <div class="row bg-white rounded shadow-sm p-2 add-todo-wrapper align-items-center justify-content-center">
                
                <div class="col">
                    <input class="form-control form-control-lg border-0 add-todo-input bg-transparent rounded" type="text" name="title" placeholder="Add new ..">
                </div>
                <div class="col-auto m-0 px-2 d-flex align-items-center">
                    <label class="text-secondary my-2 p-0 px-1 view-opt-label due-date-label d-none">Due date not set</label>
                    <i class="fa fa-calendar my-2 px-1 text-primary btn due-date-button" data-toggle="tooltip" data-placement="bottom" title="Set a Due date"></i>
                    <i class="fa fa-calendar-times-o my-2 px-1 text-danger btn clear-due-date-button d-none" data-toggle="tooltip" data-placement="bottom" title="Clear Due date"></i>
                </div>
                
                <div class="col-auto px-0 mx-0 mr-2">
                    
                    <button type="submit" class="btn btn-primary">Add</button>
                    
                    
                </div>
             
            </div>

            
        </div>
    </div>
    </form>

     
          <?php
            $todos=$conn->query("SELECT * FROM  todos ORDER BY id ASC");
          ?>

 
  <div class="row mx-1 px-5 pb-3 w-80">
        <div class="col mx-auto">

           <?php
           while($todo=$todos->fetch(PDO::FETCH_ASSOC)){ ?>
            <!-- Todo Item 1 -->

            
            <div class="row px-3 align-items-center todo-item rounded">

                <?php if($todo['checked']){ ?>
                
                <input type="checkbox" class="check-box" data-todo-id="<?php echo $todo['id'];?>" checked />
            <h2 class="checked"><?php echo $todo['title'] ?> </h2>
            <div class="col-auto m-1 p-0 todo-actions">
                    <div class="row d-flex align-items-center justify-content-end">
              
            </div>
          </div>
        
             

                      
            <?php } else{ ?>
                <input type="checkbox" class="check-box" data-todo-id="<?php echo $todo['id'];?>"/>
                 <h2><?php echo $todo['title'] ?></h2>
                   
                          

            <?php } ?>

                <div class="col-auto m-1 p-0 d-flex align-items-center">


                    <h2 class="m-0 p-0">
                        <i class="fa fa-square-o text-primary btn m-0 p-0 d-none" data-toggle="tooltip" data-placement="bottom" title="Mark as complete"></i>
                        
                    </h2>
                </div>
               
                
             
                <div class="col-auto m-1 p-0 todo-actions">
                    <div class="row d-flex align-items-center justify-content-end">

                        <h5 class="m-0 p-0 px-2">
                            <i class="fa fa-pencil text-info btn m-0 p-0" data-toggle="tooltip" data-placement="bottom" title="Edit todo"></i>
                        </h5>
                        <h5 class="m-0 p-0 px-2">
                          
                             
                        <i class="remove-to-do fa fa-trash-o text-danger btn m-0 p-0" data-toggle="tooltip" data-placement="bottom" title="Delete todo" id="<?php echo $todo['id']; ?>"></i>
                      </h5> 
                    </div>
                    <div class="row todo-created-info">
                        <div class="col-auto d-flex align-items-center pr-2">
                            <i class="fa fa-info-circle my-2 px-2 text-black-50 btn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Created date"></i>
                            <label class="date-label my-2 text-black-50"><?php echo $todo['date_time'] ?></label>
                        </div>
                    </div>
                </div>
            </div>
        
        <?php } ?>

    

</div>


 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/myjs.js" ></script>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        $(document).ready(function(){

          $(".remove-to-do").click(function(e){
                const id = $(this).attr('id');
                 $.post('app/remove.php', 
                      {
                          id: id
                      },
                      (data) => {
                         if(data){
                            $(this).parent().parent().parent().parent().hide(300);
                         }
                      }

                );
                
               
            });
          


            $(".check-box").click(function(e){
                const id = $(this).attr('data-todo-id');
                
                $.post('app/checking.php', 
                      {
                          id: id
                      },
                      (data) => {
                         if(data!='error'){
                            const h2= $(this).next();
                            if(data === '1'){
                                h2.removeClass('checked');
                            }else{
                                h2.addclass('checked');
                            }
                         }
                      }

                );
            });
        });
    </script>


</body>
</html>

 

Link to comment
Share on other sites

  • Solution

At first glance I have two questions that come to mind.

First, why are you using the query SELECT * (asterisk gives ALL values) if you want ONLY values for a specific user?

Perhaps, SELECT item, next item, etc WHERE username = $username would be more defining. (You can research "php select where" for better understanding)

Also, I don't see anywhere that you are specifying which user's information you want displayed.

Maybe I missed something, but I hope this is helpful.

 

Edited by phppup
Clean up post
Link to comment
Share on other sites

10 hours ago, phppup said:

At first glance I have two questions that come to mind.

First, why are you using the query SELECT * (asterisk gives ALL values) if you want ONLY values for a specific user?

Perhaps, SELECT item, next item, etc WHERE username = $username would be more defining. (You can research "php select where" for better understanding)

Also, I don't see anywhere that you are specifying which user's information you want displayed.

Maybe I missed something, but I hope this is helpful.

 

Thank you so much,  I didn't notice that my query was selecting all values!  Everything works now.

Edited by kraken523
Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.