Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Wednesday, August 3, 2022

Using a custom mouse cursor using CSS

 If you can change the cursor on PC, how about it online. You dont need a .cur file. Using a image file works too. Here is how.

1. Creating the cursor image file

Skip this step if you decided to use a .cur file. 
You will need photo editing software like Photoshop.
  1. Take a screenshot of a cursor 
  2. Put it in the photo editing software
  3. Remove the background
  4. Crop it into squares.
  5. Resize it into 32x32 pixels.
  6. Put the cursor in the top-left of the square.
  7. The image will look like this:

    Cursor image in 32x32px

Now that the cursor is ready, you can apply it to a website.

2. Applying the cursor to the website

  1. Make a file called style.css
  2. In the file make this line of code. 
    3. 
body {

}
  3. Inside the {}, Put this code: cursor: url('pathtocursorfile.cur'), default; Replace pathtocursorfile.cur with the file path to the cursor file like /cursor/main.cur or /cursor/main.cur.
  4. Add this code inside the head tags: <link rel=stylesheet href='style.css'>
  5. Done! 
Now if you want to make it change only when hovering it to a text box, do this steps.
  1. Repeat steps 1 and 2
  2. Replace body into textarea in the CSS file
  3. In the HTML file, create a text box using the textarea tag.
Now were done! so I'm gonna use a custom cursor to this blog! So long...
at No comments:
Labels: ,

Wednesday, March 30, 2022

Making a File Upload form that checks supported file types

 Hello were back again. Here I want to show you how to make an file uploading form that can check the supported file type. So first we need to make the form itself using HTML. Here is the code.


index.html


<html>
  <head>
    <title>Images</title>
  </head>
  <body>
    <h1>Submit an Image to Arcade 70 Coding</h1>
    <h3>only Image files are allowed.</h3>
    <form action="submitted.php"
     enctype="multipart/form-data"
     method="post">
      <input name="FileUpload" type="file" />
      <br>
      <input name="submit" type="submit" value="Submit" />
    </form>
  </body>
</html>

Notice

in the <FORM> tag, include the   enctype='multipart/form-data  or else it won't work. It also happened to me before when I ask this question in StackOverflow.


Now lets continue to php. Name the file submitted.php. If you want to name it another name,  change the file destination in the previous html code. More, it can copy the uploaded file to the admin's web server directory. Just replace /pathname/ into your own web server path. Also, it can show the user the uploaded file info. The TMP file path can be ignored. The File size were measured in bytes (b). here is the code

submitted.php


<html>
  <head>
    <title>Uploading File</title>
  </head>
  <body>
    <h1>File Info</h1>
    <?php
echo "<b>File Name: </b>". $_FILES['FileUpload']['name'] . "<br>";
echo "<b>File Type: </b>". $_FILES['FileUpload']['type'] . "<br>";
echo "<b>File Location: </b>". $_FILES['FileUpload']['tmp_name']. "<br>";
echo "<b>File Size: </b>". $_FILES['FileUpload']['size']; 
echo " bytes (B)";
echo "<br><br>";

$FileSource = $_FILES['FileUpload']['tmp_name'];
$FileUpload = '/pathname/'. $_FILES['FileUpload']['name'];

// checks and submits file
if (isset($_POST["submit"])) {
  if (($_FILES['FileUpload']['type'] == "image/png")
  or ($_FILES['FileUpload']['type'] == "image/jpg") 
  or ($_FILES['FileUpload']['type'] == "image/jpeg")
  or ($_FILES['FileUpload']['type'] == "image/svg")
  or ($_FILES['FileUpload']['type'] == "image/bmp")
  {
  copy($FileSource,$FileUpload);
  echo "<h1>Upload Complete!</h1>";
  }
  else
  {
  echo "<h3>Sorry, you can only upload image files.</h3>";
  }
}
?>
  </body>
</html>
at No comments:
Labels: , ,

Tuesday, March 29, 2022

Making a working Login Form using HTML and PHP

 Hi and Welcome to this first post of this new blog. This is Calvin and I love coding. I only know a bit but I still can help you learn coding out of this blog. Without further ado, Let's start with the topic.


How to make a working Login form using HTML and PHP

Now lets get started first with HTML. Add a file called index.html. If the filename is index. users don't have to type /index.html after the domain name. Lets try not to use cookies and CSS to make it easy. HTML can be used for the form itself. Here is the code

index.html


<!DOCTYPE html>
<html>
     <head>
         <title>Please Login</title>
     </head>
     <body>
         <h1>Login to Pro 70>
         <form method="post" action="login.php">
             <label for="Username">Enter your Username</label>
             <input type="text" name="Username" placeholder="Username">
             <br><br>
             <label for="Password">Enter your Password</label>
             <input type="password" name="Password" placeholder="Password">
             <br>
             <input type="submit" value="Login">
             <input type="reset" value="Clear">
         </form>
     </body>
<html>


Now that were done with HTML, Let's move to PHP to check that the Username and Password is correct. First you need to install it first. Go to the PHP official Website to install it. Follow the instructions provided to install it. After you are done installing PHP, you can proceed to the next step.

Create a file named login.php. Don't change the filename to any name or else it will display a 404 error.


login.php


<?php

if (($_POST['Username'] == "Admin") and ($_POST['Password'] == "Password123"))
{
 echo "Welcome Admin or User.";
}
else
{
 echo "Wrong Username and Password, Try again.";
}

?>

Try it Your self!

Try to type the username Admin and the Password Password123. And click login. If it displays the welcome message you've type the correct username and password. Now try to type the wrong username and password. It will display a wrong password.

That's all

That all for today, If you have any questions, Please comment down below. Bye!
at
Labels: , ,
Subscribe to: Posts (Atom)

Using a custom mouse cursor using CSS

 If you can change the cursor on PC, how about it online. You dont need a .cur file. Using a image file works too. Here is how. 1. Creating ...