CSS not being applied correctly and it looks wrong - python

I'm trying to apply styles to my template,
{% load static %}
<!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="{% static '/css/main.css' %}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<title>Email Scrapper</title>
</head>
<body>
<div class="container">
<br/>
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8">
<form class="card card-sm" action="{% url 'scrap' %}" method="GET">
<div class="card-body row no-gutters align-items-center">
<div class="col-auto">
<i class="fas fa-search h4 text-body"></i>
</div>
<!--end of col-->
<div class="col">
<input type="text" class="form-control form-control-lg form-control-borderless" placeholder="Search topics or keywords" name="q" id="InputSearch" value="{{ q.get }}"
aria-describedby="searchHelp">
</div>
<!--end of col-->
<div class="col-auto">
<button class="btn btn-lg btn-success" type="search>Search</button>
</div>
<!--end of col-->
</div>
</form>
</div>
<!--end of col-->
</div>
</div>
</body>
</html>
css:
body{
background:#ddd;
}
.form-control-borderless {
border: none;
}
.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {
border: none;
outline: none;
box-shadow: none;
}
The problem is that when I run it, the following thing appears:
Image of the output
When it should be more like this:
This should be the output
Before it worked, but when I applied some code of my own it suddenly stopped working. This code is running in Django and python.


1: Make sure to add bootstrap link if you are using bootstrap
2: you forgot to put double quotes (") after type="search
background:#ddd;
}
.form-control-borderless {
border: none;
}
.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {
border: none;
outline: none;
box-shadow: none;
}
<!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="{% static '/css/main.css' %}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- Make sure to add bootstrap link if you are using bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Email Scrapper</title>
</head>
<body>
<div class="container">
<br/>
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8">
<form class="card card-sm" action="{% url 'scrap' %}" method="GET">
<div class="card-body row no-gutters align-items-center">
<div class="col-auto">
<i class="fas fa-search h4 text-body"></i>
</div>
<div class="col">
<input type="text" class="form-control form-control-lg form-control-borderless" placeholder="Search topics or keywords" name="q" id="InputSearch" value="{{ q.get }}"
aria-describedby="searchHelp">
</div>
<div class="col-auto">
<button class="btn btn-lg btn-success" type="search">Search</button>
<!-- Here you forgot to put double quotes (") after type="search -->
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

Related

Redirected to login page after logging in

I'm currently developing a Django web app, however I have an issue: After login, the user clicks on any button eg. Home (which has been linked to views with the #login_required decorator) and gets logged out and redirected back to the login page. I'm using Firebase for the authentication.
My views.py:
def postsign(request):
email=request.POST.get('email')
passw=request.POST.get('pass')
try:
user=auth.sign_in_with_email_and_password(email,passw)
except:
message="Invalid credentials. Try again."
return render(request,"login.html", {"msg":message})
session_id=user['idToken']
request.session['uid']=str(session_id)
return render(request,"pick.html")
#login_required(login_url='login')
def pick(request):
return render_to_response('pick.html')
My pick.html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>FYP - Is Your Network Safe?</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap/css/loader.css' %}" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="{% static 'vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/grayscale.min.css' %}" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">TestPage</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{% url 'pick' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{% url 'logout' %}">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
My login.html:
{% if msg %}
<script>
alert('{{msg}}');
</script>
{%endif%}
{% if msgg %}
<script>
alert('{{msgg}}');
</script>
{%endif%}
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spectral SC">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="{% static 'css/logincss.css' %}">
</head>
<style>
h1{
color:#edf1ff;
text-shadow: 5px 5px 10px black;
}
.headerone{
font-family: 'Spectral SC', serif;
padding: 110px 0;
text-align: center;
}
body{
background-color: black;
}
</style>
<body>
<div class="login-dark">
<form action="/post_sign/" method="post">
{% csrf_token %}
<div class="illustration"><i class="icon ion-ios-locked-outline"></i></div>
<div class="form-group">Email: <input type="email" name="email" autocomplete="off" required></div>
<div class="form-group">Code: <input type="password" name="pass" autocomplete="off" required></div>
<input class="btn btn-primary btn-block" type="submit" value="Sign In"><br>
Can't Login? Click me, i'll help.</form>
</div>
</section>
<footer class="bg-black small text-center text-white-50">
</footer>
</body>
</html>
My urls.py
from django.contrib import admin
from django.urls import path
from myapp import views as v
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf.urls import include
from myapp.views import postregister, logout_view
urlpatterns = [
path('pick/', v.pick, name="pick"),
path('', v.signIn, name="login"),
path('post_sign/', v.postsign),
path('accounts/logout/', logout_view, name="logout")
]
urlpatterns += staticfiles_urlpatterns()
Just to put a note that the url shows http://127.0.0.1:8000/?next=/pick/ after clicking on the 'Home' button. Is there a way I can resolve this issue or any suggestions on how do I get this to work?

Since you are using HTTP instead of HTTPS, check if the following settings are set to false;
SESSION_COOKIE_SECURE
CSRF_COOKIE_SECURE
SECURE_SSL_REDIRECT

How can I fix error: 'expected str, bytes or os.PathLike object, not _io.TextIOWrapper' in Python FTP [duplicate]

This question already has an answer here:
How to upload data from memory via FTP in Python 3?
(1 answer)
Closed 1 year ago.
I have the following code. All this code does is takes a few items from a user's pc then uploads them to a website.
# log in
session = ftplib.FTP('host', 'username', 'password')
# upload webpage
try:
print(Fore.LIGHTMAGENTA_EX + "What's the name of the movie? ", end='')
print(Fore.WHITE + '', end='')
name = input('')
session.cwd(dirname='../video')
htmlfilecontent = '''<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4MRZ3QHNFE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-4MRZ3QHNFE');
</script>
<title>Watching A Movie</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/stylesheet.css">
<link rel="icon" type="image/png" href="../logo.png" />
<meta name="description" content="Watch new movies for free on our platform!" />
<meta name="keywords"
content="film, movies, free movies, full movies, Quessts, free full movie, free streaming, online movie" />
<meta name="author" content="Quessts">
</head>
<body style="background-color: #303030; font-size: x-large;">
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<div class="container-fluid">
<a href="../index.html">
<img src="../logo.png" height="80px" width="80px">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="../index.html"
style="color: aliceblue; margin-left: 20px; margin-right: 20px;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="../request.html"
style="color: aliceblue; margin-left: 20px; margin-right: 20px;">Request</a>
</li>
<li class="nav-item ">
<a class="nav-link active" href="../contact.html"
style="color: aliceblue; margin-left: 20px; margin-right: 20px;">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="../about.html"
style="color: aliceblue; margin-left: 20px; margin-right: 20px;">About</a>
</li>
</ul>
</div>
</div>
</nav>
<br>
<br>
<br>
<br>
<h1 class="sameline" style="color: #AA0000;">''' + name + '''</h1>
<br>
<div class="sameline">
<video width="800" height="400" controls>
<source src="../videosrecords/''' + videoname + '''" type="video/mp4" />
</video>
</div>
<br>
<br>
<br>
<footer class="site-footer bg-dark">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<h6>About</h6>
<p class="text-justify">AnonFilms is a free video file sharing website dedicated to all users. This
website
contains movies from all genres and exists for the sole purpose of user entertainment.
</p>
</div>
<div class="col-xs-6 col-md-3">
<h6>Legal</h6>
<ul class="footer-links">
<li>Terms of service</li>
<li>Privacy Policy</li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<h6>Quick Links</h6>
<ul class="footer-links">
<li>Home page</li>
<li>Request a movie</li>
<li>Contact us</li>
<li>About us</li>
</ul>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">Copyright © 2020 All Rights Reserved by
AnonFilms.
</p>
</div>
</div>
</div>
</footer>
</body>
'''
realname = name.replace(" ", "")
htmlfile = open(f'{realname}.html', 'w')
htmlfile.write(htmlfilecontent)
htmlfile.close()
file = open(htmlfile, 'rb')
session.storbinary(f'STOR {htmlfile}', file)
print(Fore.GREEN + f"Successfully uploaded '{name}' to website")
except Exception as e:
print(e)
For some reason, after a user enters the name he gets the following error:
expected str, bytes or os.PathLike object, not _io.TextIOWrapper
It's my first time facing this error. What does it mean? And how can I fix it?
......................................................................................................................................................................................................

That would be this line:
file = open(htmlfile, 'rb')
You're passing a file/_io.TextIOWrapper as the first argument when it expects a str or bytes like the error shows.
I'm guessing this is what you instead want to do:
file = open(f"{realname}.html", 'rb')
session.storbinary(f'STOR {realname}.html', file)

Why is my css file not connecting to the html?

For some reason, my CSS code is not connecting with my HTML. I am not sure why this is happening what to do to fix the issue. home.html should be connecting to the CSS file main.css. I have added the static file block to the base.html and home.html since home extends base but the issue is still occurring.
base.html
{%load static%}
<!DOCTYPE html>
<html>
<head>
<title>TweetyBird</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type= "text/css" href="{% static 'css/main.css' %}" >
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">TweetyBird</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Company Registration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Company Sign in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
</li>
</ul>
</nav>
</div>
</head>
{%block staticfiles%}
{% endblock %}
</nav>
{% block content %}
{% endblock %}
</body>
</html>
home.html
{% extends 'base.html' %}
{%load static%}
{%block staticfiles%}
<link rel="stylesheet" type= "text/css" href="{% static 'css/main.css' %}" >
{% endblock %}
<body>
{% block content %}
<div class="banner">
<div class="app-text">
<h1>Text</h1>
<p> Text </p>
</div>
{% endblock %}
</body>
main.css
body
{
background-color: lightblue;
}
.banner{
width: 80%;
height: 70%;
top: 25%;
left: 130px;
position: absolute;
color: #fff;
}
.app-text{
width: 50%;
float: left;
}
.app-text h1{
font-size: 43px;
width: 640px;
position: relative;
margin-left: 40px;
}

Is your CSS file in a different folder from the HTML file? If so, you might want to ../css/main.css instead.

Your link should be in head section. So, change your base.html. Here, it goes:
{% load static%}
<!DOCTYPE html>
<html>
<head>
<title>TweetyBird</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type= "text/css" href="{% static 'css/main.css' %}" >
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
{% block staticfiles %}
{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">TweetyBird</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Company Registration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Company Sign in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
*Note:- There were some tags closed which was never opened like inner nav tag. Also, do not forget to use {% load static%} at the top of inheriting htmls.

I've had the exact same problem like two weeks ago. It's important to know which folder you are in. so, it's not working because the location 'css/main.css' is incorrect. try going outside of this folder, maybe back another folder and try looking for the exact location.

404 Error in flask webapp unable to find reason

When running the webapp a 404 error appears, the error doesnt even allow my error html to run even when changing it to the most basic of templates. I dont know where my request is being not found.
Ive tried removing all of the style sheets from base.html to see if its those, I tried changing the error.html to see if it will actually run I've attempted to comment out all url_for's in the html files.
I commented out the results bit so i dont think its that.
routes.py
from app import app
from flask import Flask, abort, jsonify, redirect, url_for, request, render_template
from werkzeug.exceptions import HTTPException
from app.results import clean_data, get_response
#app.errorhandler(Exception)
def handle_error(e):
'''
code = 500
if isinstance(e, HTTPException):
code = e.code'''
print(str(e))
return render_template("error.html")
#app.route('/', methods=['GET', 'POST'])
def index():
data = clean_data(request.form)
response = get_response(data)
print(response)
return render_template("index.html")
base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Default Scorer -- Ebury</title>
<meta name = "viewport" content = "width=device-width", initial-scale = 1, shrink-to-fit=no">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<!-- CSS-->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- JS-->
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script src="https://ebury-chameleon.s3.amazonaws.com/1.17.0/scripts/ebury-chameleon.js" type="text/javascript"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">
<img src="{{ url_for('static', filename='img/Ebury.png') }}" width="80" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="/"><b>Default Scorer</b> <span class="sr-only">(current)</span></a>
</div>
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="/logout">Log out</a>
</div>
</div>
</nav>
<body>
</body>
</html>
index.html(only relevant parts its got a lot of forms)
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block content %}
<div class="m-1 pb-3"></div>
<div class="container-fluid">
<div class = "row">
<div class="col-md-3 push-md-3">
<div class = "m-0 pb-0">
<form action="" method="post" role="form" class="needs-validation" novalidate>
<div class="container">
<div class = "form-group">
<div class = "row">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class = "input-group-text">BVD ID Number</span>
</div>
<input type = "text" class = "form-control" id = "bvd_id_number" name = "bvd_id_number">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
{% endblock %}
error.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ERROR</title>
</head>
<body>
<h1>ERROR</h1>
</body>
</html>
So what happens is that the form doesnt appear and it seems only base.html appears with nothing else, the icon doesnt appear either but I tried commenting that out and that doesnt work.
The error printed is "404 Not Found: The requested URL was not found on the server. IF you entered the URL manually please check your spelling and try again"

To future people: I solved because the base.html did not specify where it had to be extended. The correct base.html code would be:
<html>
<head>
<meta charset="utf-8">
<title>Default Scorer -- Ebury</title>
<meta name = "viewport" content = "width=device-width", initial-scale = 1, shrink-to-fit=no">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<!-- CSS-->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- JS-->
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script src="https://ebury-chameleon.s3.amazonaws.com/1.17.0/scripts/ebury-chameleon.js" type="text/javascript"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">
<img src="{{ url_for('static', filename='img/Ebury.png') }}" width="80" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="/"><b>Default Scorer</b> <span class="sr-only">(current)</span></a>
</div>
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="/logout">Log out</a>
</div>
</div>
</nav>
<body>
{% block content %}
{% endblock %}
</body>
{% block scripts %}
{% endblock %}
</html>```

Python mechanicalsoup get web form

I am writing a standalone bot that log into JitJat, an anonymous instant messaging site and send a message to a user. I successfully do this and I reach the index where I select my recipient.
Finally, I can chat with somebody at the chat but whenever I try to get the form of the page I get None.
I tried to do this many times, using robobrowser, requests and mechanicalsoup.
Here my script:
import mechanicalsoup
#Current url: https://jitjat.org/login.php
browser = mechanicalsoup.StatefulBrowser()
browser.open('https://jitjat.org/login.php')
print('Current url: ' + str(browser.get_url()))
browser.select_form()
browser['username'] = 'my username'
browser['password'] = 'my password'
browser.submit_selected()
print('Redirect: ' + str(browser.get_url()))
#Current url: https://jitjat.org/index.php
browser.follow_link("recipient username")
print('Redirect: ' + str(browser.get_url()))
#Current url: https://jitjat.org/chat.php?id=(recipient username)
browser.select_form()
print(browser.get_current_form().print_summary())
Here the page source:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JitJat - anonymous instant messaging</title>
<link href="css/jChat.css" rel="stylesheet" media="screen" type="text/css" />
<link href="css/reset.css" rel="stylesheet" media="screen" type="text/css" />
<link href="css/bootstrap.css" rel="stylesheet" media="screen" type="text/css" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen" type="text/css" />
<link href="css/user_css.css" rel="stylesheet" media="screen" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/jChat.js" type="text/javascript"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div id="header">
<div id="logo">
<h1>logo</h1>
</div>
<div id="info">
<ul id="userBox">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">ni47gv2x9ne<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span class="icon-off"></span> <strong>Logout</strong></li>
</ul>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="container">
<ul class="breadcrumb">
<li>Home<span class="divider">»</span></li>
<li class="active">Chat</li>
</ul>
</div>
<div class="container">
<ul class="breadcrumb" align="center">
<li><noscript>
<span style="font-weight: normal; color: #ff0000">You need to have scripting enabled to use Chat.</span>
</noscript>
<script type="text/javascript">
document.write('You are using <span style="font-weight: bold">Chat</span>.');
</script> Click to enter <span style="font-weight: normal">Messaging</span> <img src="images/ui/question.png" width="13" height="13" style="vertical-align: -1px;" title="differences: click-to-send, manual refresh, manual scroll, multiple lines possible, delete single messages, see if message is unread"></li>
</ul>
</div>
<div class="container">
<!-- BOX -->
<div class="box">
<div class="header">
<div style="z-index: 10; position: absolute; left: 88%; margin-top: 8px; width: 135px; height: 25px; border: 0px solid black;">nuke conversation</div>
<h4><img src="images/avatars/user1.png" width="14" height="14" style="vertical-align: -2px;"> bluebear</h4>
</div>
<div class="content">
<!-- jChat -->
<ul class="messages-layout">
<li class="messages"></li>
</ul>
<!-- Enter message field -->
<span class="session_time">Online</span><span id="sample"></span>
<div class="message-entry">
<input type="text" id="text-input-field" class="input-sm" name="message-entry" />
<div class="send-group">
<input type="submit" name="send-message" id="sendMessage" class="btn btn-primary" value="Send" />
</div>
</div>
<!-- Emoticons Modal -->
<div id="emoticons" class="modal hide fade">
<div class="modal-header"><h4>Emotions</h4></div>
<div class="modal-body"></div>
<div class="modal-footer">
Close
</div>
</div>
<!-- // jChat -->
</div>
</div>
<!-- // END BOX -->
</div>
</body>
<script>
$().Chat();
</script>
</html>
How can I fix it? Do you have any idea to solve it??
Thank you for the attention!

I solved the issue.
For all those who have problems similar to this, due to particular html codes, I recommend using robobrowser, a smart cross-platform module
(useful documentation here).
If for some reason you can not get the form of the page:
Try to specify the id of the form, like:
browser = RoboBrowser(id='FormId')
Try to pass headers with requests module:
import requests
mysession = requests.session()
open = mysession.get('website_url')
print(open.headers)
Add headers like so:
mysession.headers = open.headers
browser = RoboBrowser(id='FormId', session=mysession, history=True)
Hope it helps!

Categories

Resources