Python mechanicalsoup get web form - python

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!

Related

(Python html) write python result in html, face simple layout error

the python script can rewrite all content of specify .html (in this case is "simple_website.html"), and showing the data extract from mysql
.py
import mysql.connector
import webbrowser
import time
mydb = mysql.connector.connect(
host="196.100.100.141",
user="root",
password="password456",
database="database_db",
auth_plugin='mysql_native_password'
)
mycursor = mydb.cursor()
mycursor.execute("SELECT row_01 FROM first_db")
myresult = mycursor.fetchall()
list_01 = []
for row in myresult:
temp_val = row[0]
list_01.append(temp_val)
print(list_01[5]) # get specific data from MySQL
html_content = f"<html><h1>this is the data extract from mysql:{list_01[5]} </h1></html>"
with open("simple_website.html","w") as html_file:
html_file.write(html_content) # show specific data on website
time.sleep(2)
webbrowser.open_new_tab("simple_website.html")
the output website pic with this logic
Q: if I just want to insert/replace "extract data (from mysql)" to certain area, how can I do so?
such as I just want to change the title , or part of the content in website, with "extract data"
original .html file (works fine)
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rayson Technology - Your best OEM/ODM partner for Bluetooth solution</title>
<meta name="description" content=" content, we are the best company">
<meta name="keywords" content="content, where thestory begin" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="icon" href="../images/favicon.png">
<!-- CSS ============================================ -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../assets/css/vendor/bootstrap.min.css">
<!-- Font Family CSS -->
<link rel="stylesheet" href="../assets/css/vendor/cerebrisans.css">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="../assets/css/vendor/fontawesome-all.min.css">
<link rel="stylesheet" href="../assets/css/vendor/linea-icons.css">
<!-- Swiper slider CSS -->
<link rel="stylesheet" href="../assets/css/plugins/swiper.min.css">
<!-- animate-text CSS -->
<link rel="stylesheet" href="../assets/css/plugins/animate-text.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="../assets/css/plugins/animate.min.css">
<!-- Light gallery CSS -->
<link rel="stylesheet" href="../assets/css/plugins/lightgallery.min.css">
<!-- Main Style CSS -->
<link rel="stylesheet" href="../assets/css/Custom.css">
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<div class="preloader-activate preloader-active open_tm_preloader">
<div class="preloader-area-wrap">
<div class="spinner d-flex justify-content-center align-items-center h-100">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
</div>
<!-- Header Bottom Wrap Start -->
<div class="header-bottom-wrap header-sticky">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header default-menu-style position-relative">
<!-- brand logo -->
<div class="header__logo">
<a href="index.html">
<img src="../images/logo.png" width="160" height="48" class="img-fluid" alt="">
</a>
</div>
<!-- header midle box -->
<div class="header-midle-box">
<div class="header-bottom-wrap d-md-block d-none">
<div class="header-bottom-inner">
<div class="header-bottom-left-wrap">
<!-- navigation menu -->
<div class="header__navigation d-none d-xl-block">
<nav class="navigation-menu primary--menu">
<ul>
<li class="has-children has-children--multilevel-submenu">
<span>Products</span>
<ul class="submenu">
<li><span>Nordic</span></li>
<li><span>product_02</span></li> <!-- # the line I want to change with mysql data -->
<li><span>product_03</span></li>
</ul>
</li>
<li>
<span>Software Support</span>
</li>
<li>
<span>Customization</span>
</li>
<li>
<span>Success Stories</span>
</li>
<li>
<span>Contact</span>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- header right box -->
<div class="header-right-box">
<div class="header-right-inner" id="hidden-icon-wrapper">
<!-- language-menu -->
<div class="language-menu">
<ul>
<li>
<a href="#" class="">
<span class="wpml-ls-native">English</span>
</a>
<ul class="ls-sub-menu">
<li class="">
<a href="../chinese/" class="">
<span class="wpml-ls-native">繁體中文</span>
</a>
</li>
<li class="">
<a href="../schinese/" class="">
<span class="wpml-ls-native">簡體中文</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- header-search-form -->
<div class="header-search-form default-search">
<form action="search.html" class="search-form-top">
<input class="search-field" type="text" placeholder="Search…">
<button class="search-submit">
<i class="search-btn-icon fa fa-search"></i>
</button>
</form>
</div>
</div>
<div class="footer-copyright-area section-space--ptb_15">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<!-- breadcrumb-list start -->
<ul class="breadcrumb-list">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Products</li>
<li class="breadcrumb-item active">Nordic</li>
</ul>
<!-- breadcrumb-list end -->
</div>
<div class="col-md-6 text-center text-md-end">
<span class="copyright-text">© 2022 sam_JR Technology co.,Ltd. All Rights Reserved.</span>
</div>
</div>
</div>
</div>
</div>
<!--==================== End of footer area ====================-->
</body>
</html>
idea: that I put the original html code with html_content = f" , and the old content will replace with {list_01[5]} , it should works fine, as the above logic showing, what do I need to change for code
I did
put original website html into .py script in html_content = f"
replace the old content with extract mysql data {list_01[5]} , in line 109
tried in .py script
import mysql.connector
import webbrowser
import time
mydb = mysql.connector.connect(
host="196.100.100.141",
user="root",
password="password456",
database="database_db",
auth_plugin='mysql_native_password'
)
mycursor = mydb.cursor()
mycursor.execute("SELECT row_01 FROM first_db")
myresult = mycursor.fetchall()
list_01 = []
for row in myresult:
temp_val = row[0]
list_01.append(temp_val)
print(list_01[5]) # get specific data from MySQL
html_content = f"<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rayson Technology - Your best OEM/ODM partner for Bluetooth solution</title>
<meta name="description" content=" content, we are the best company">
<meta name="keywords" content="content, where thestory begin" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="icon" href="../images/favicon.png">
<!-- CSS ============================================ -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../assets/css/vendor/bootstrap.min.css">
<!-- Font Family CSS -->
<link rel="stylesheet" href="../assets/css/vendor/cerebrisans.css">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="../assets/css/vendor/fontawesome-all.min.css">
<link rel="stylesheet" href="../assets/css/vendor/linea-icons.css">
<!-- Swiper slider CSS -->
<link rel="stylesheet" href="../assets/css/plugins/swiper.min.css">
<!-- animate-text CSS -->
<link rel="stylesheet" href="../assets/css/plugins/animate-text.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="../assets/css/plugins/animate.min.css">
<!-- Light gallery CSS -->
<link rel="stylesheet" href="../assets/css/plugins/lightgallery.min.css">
<!-- Main Style CSS -->
<link rel="stylesheet" href="../assets/css/Custom.css">
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<div class="preloader-activate preloader-active open_tm_preloader">
<div class="preloader-area-wrap">
<div class="spinner d-flex justify-content-center align-items-center h-100">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
</div>
<!-- Header Bottom Wrap Start -->
<div class="header-bottom-wrap header-sticky">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header default-menu-style position-relative">
<!-- brand logo -->
<div class="header__logo">
<a href="index.html">
<img src="../images/logo.png" width="160" height="48" class="img-fluid" alt="">
</a>
</div>
<!-- header midle box -->
<div class="header-midle-box">
<div class="header-bottom-wrap d-md-block d-none">
<div class="header-bottom-inner">
<div class="header-bottom-left-wrap">
<!-- navigation menu -->
<div class="header__navigation d-none d-xl-block">
<nav class="navigation-menu primary--menu">
<ul>
<li class="has-children has-children--multilevel-submenu">
<span>Products</span>
<ul class="submenu">
<li><span>Nordic</span></li>
<li><span>{list_01[5]}</span></li> <!-- # the line I want to change with mysql data -->
<li><span>product_03</span></li>
</ul>
</li>
<li>
<span>Software Support</span>
</li>
<li>
<span>Customization</span>
</li>
<li>
<span>Success Stories</span>
</li>
<li>
<span>Contact</span>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- header right box -->
<div class="header-right-box">
<div class="header-right-inner" id="hidden-icon-wrapper">
<!-- language-menu -->
<div class="language-menu">
<ul>
<li>
<a href="#" class="">
<span class="wpml-ls-native">English</span>
</a>
<ul class="ls-sub-menu">
<li class="">
<a href="../chinese/" class="">
<span class="wpml-ls-native">繁體中文</span>
</a>
</li>
<li class="">
<a href="../schinese/" class="">
<span class="wpml-ls-native">簡體中文</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- header-search-form -->
<div class="header-search-form default-search">
<form action="search.html" class="search-form-top">
<input class="search-field" type="text" placeholder="Search…">
<button class="search-submit">
<i class="search-btn-icon fa fa-search"></i>
</button>
</form>
</div>
</div>
<div class="footer-copyright-area section-space--ptb_15">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<!-- breadcrumb-list start -->
<ul class="breadcrumb-list">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Products</li>
<li class="breadcrumb-item active">Nordic</li>
</ul>
<!-- breadcrumb-list end -->
</div>
<div class="col-md-6 text-center text-md-end">
<span class="copyright-text">© 2022 sam_JR Technology co.,Ltd. All Rights Reserved.</span>
</div>
</div>
</div>
</div>
</div>
<!--==================== End of footer area ====================-->
</body>
</html>"
with open("simple_website.html","w") as html_file:
html_file.write(html_content) # show specific data on website
time.sleep(2)
webbrowser.open_new_tab("simple_website.html"
should be the same logic, just need to improve layout/format of try .py code

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)

CSS not being applied correctly and it looks wrong

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>

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 Django Webapp is not responsive in smartphone

I have developed my first web app in python Django framework, deployed in pythonanywhere.com web server.
I have already used the latest bootstrap in this app, but it is not responsive properly on a smartphone screen. responsive in laptop and tablet but not in a smartphone.
You can also check it in your phone "http://sandeepbhatt.pythonanywhere.com/".
please look into my base.html and index.html code, where is the problem, also please let me know if there are any details required to figure out this problem which is not mention in this post.
My base.html code:
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<title>PIV</title>
<!-- <link rel="stylesheet" href="{% static "css/index.css" %}"> -->
</head>
<body>
<!-- <style>
body{ background: url("{% static "images/background.jpg" %}"); background-size: cover; background-repeat: no-repeat;}
</style> -->
<!-- Navbar start from here -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- <a class="navbar-brand" href="">Navbar</a> -->
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="{% url 'index' %}">
<img src="{% static " images/logo.jpg" %}" width="70" height="50" alt="">
</a>
</nav>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Logout</a>
</li>
{% else %}
<!-- <li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:user_login'%}">Login</a>
</li> -->
{% endif %}
<li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:analysis' %}">Analysis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:tracking' %}">Tracking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'admin:index' %}">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'survey_app:register' %}">Register</a>
</li>
</ul>
</div>
</nav>
</body>
<div class="container">
{% block contant %}
{% endblock %}
</div>
<!-- footer -->
<div class="card text-center">
<div class="card-footer text-muted">
Powered By <small>Political India Venture</small>
©2019
</div>
</div>
</html>
My index.html code:
<!DOCTYPE html>
{% extends 'survey_app/base.html' %}
{% load static %}
{% block contant %}
<head>
<link rel="stylesheet" href="{% static " css/login_form.css" %}">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> -->
</head>
<!-- <style>
body{ background: url("{% static "images/background.jpg" %}"); background-size: cover; background-repeat: no-repeat;}
</style> -->
<div class="row">
<div class="col">
<h2>Welcome to Political India Venture </h2>
<h2>Survey App!</h2>
<h5 class="font-italic<div class=" row">
<h5>Get the answers you need</h5>
<div class="wrapper">
<form method="POST" class="form-signin" action="{% url " survey_app:user_login" %}">
{% csrf_token %}
{# A more "HTML" way of creating the login form#}
<h2 class="form-signin-heading">Please login</h2>
<input type="text" class="form-control" name="username" placeholder="User Name" required="" autofocus="" />
<input type="password" class="form-control" name="password" placeholder="Password" required="" />
<label class="checkbox">
<input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</form>
</div>
</div>
</div>
{% endblock %}

I found the solution after number of testing in my app and found there was only one bootstrap tag missing.
I just add this in my base.html file:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
and now it is proper responsive on every device.

Your template is broken, look at <h5> class-"font-italic there is no closure (in index.html)

Categories

Resources