From c2d72be6a3f8109ddf4c4af0c3a5647b049d5cab Mon Sep 17 00:00:00 2001
From: Charaka V Mihiranga
 <143955766+CharakaMihiranga@users.noreply.github.com>
Date: Tue, 10 Sep 2024 21:58:30 +0530
Subject: [PATCH] Python-MySQL-Integration:Implemented an HTML/CSS user
 registration form and integrated it with a Flask backend. The form uses
 JavaScript to submit data via `fetch` with
 `application/x-www-form-urlencoded` encoding. The Flask backend processes and
 saves the user data to a MySQL database.

---
 JWT/JWT-Frontend/.idea/.gitignore             |   8 +++
 JWT/JWT-Frontend/.idea/JWT-Frontend.iml       |   9 +++
 JWT/JWT-Frontend/.idea/misc.xml               |   6 ++
 JWT/JWT-Frontend/.idea/modules.xml            |   8 +++
 JWT/JWT-Frontend/.idea/vcs.xml                |   6 ++
 Python-MySQL-Integration/.idea/.gitignore     |   8 +++
 .../.idea/Python-MySQL-Integration.iml        |  21 ++++++
 .../.idea/dataSources.xml                     |  12 ++++
 .../inspectionProfiles/Project_Default.xml    |   7 ++
 .../inspectionProfiles/profiles_settings.xml  |   6 ++
 Python-MySQL-Integration/.idea/misc.xml       |   7 ++
 Python-MySQL-Integration/.idea/modules.xml    |   8 +++
 Python-MySQL-Integration/.idea/vcs.xml        |   6 ++
 .../__pycache__/app.cpython-312.pyc           | Bin 0 -> 1428 bytes
 Python-MySQL-Integration/app.py               |  29 ++++++++
 Python-MySQL-Integration/entity/User.py       |  34 +++++++++
 .../entity/__pycache__/User.cpython-312.pyc   | Bin 0 -> 2167 bytes
 Python-MySQL-Integration/model/UserModel.py   |  16 +++++
 .../__pycache__/UserModel.cpython-312.pyc     | Bin 0 -> 1133 bytes
 Python-MySQL-Integration/static/js/index.js   |  29 ++++++++
 Python-MySQL-Integration/templates/index.html |  67 ++++++++++++++++++
 21 files changed, 287 insertions(+)
 create mode 100644 JWT/JWT-Frontend/.idea/.gitignore
 create mode 100644 JWT/JWT-Frontend/.idea/JWT-Frontend.iml
 create mode 100644 JWT/JWT-Frontend/.idea/misc.xml
 create mode 100644 JWT/JWT-Frontend/.idea/modules.xml
 create mode 100644 JWT/JWT-Frontend/.idea/vcs.xml
 create mode 100644 Python-MySQL-Integration/.idea/.gitignore
 create mode 100644 Python-MySQL-Integration/.idea/Python-MySQL-Integration.iml
 create mode 100644 Python-MySQL-Integration/.idea/dataSources.xml
 create mode 100644 Python-MySQL-Integration/.idea/inspectionProfiles/Project_Default.xml
 create mode 100644 Python-MySQL-Integration/.idea/inspectionProfiles/profiles_settings.xml
 create mode 100644 Python-MySQL-Integration/.idea/misc.xml
 create mode 100644 Python-MySQL-Integration/.idea/modules.xml
 create mode 100644 Python-MySQL-Integration/.idea/vcs.xml
 create mode 100644 Python-MySQL-Integration/__pycache__/app.cpython-312.pyc
 create mode 100644 Python-MySQL-Integration/app.py
 create mode 100644 Python-MySQL-Integration/entity/User.py
 create mode 100644 Python-MySQL-Integration/entity/__pycache__/User.cpython-312.pyc
 create mode 100644 Python-MySQL-Integration/model/UserModel.py
 create mode 100644 Python-MySQL-Integration/model/__pycache__/UserModel.cpython-312.pyc
 create mode 100644 Python-MySQL-Integration/static/js/index.js
 create mode 100644 Python-MySQL-Integration/templates/index.html

diff --git a/JWT/JWT-Frontend/.idea/.gitignore b/JWT/JWT-Frontend/.idea/.gitignore
new file mode 100644
index 0000000..13566b8
--- /dev/null
+++ b/JWT/JWT-Frontend/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/JWT/JWT-Frontend/.idea/JWT-Frontend.iml b/JWT/JWT-Frontend/.idea/JWT-Frontend.iml
new file mode 100644
index 0000000..d6ebd48
--- /dev/null
+++ b/JWT/JWT-Frontend/.idea/JWT-Frontend.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/JWT/JWT-Frontend/.idea/misc.xml b/JWT/JWT-Frontend/.idea/misc.xml
new file mode 100644
index 0000000..6f29fee
--- /dev/null
+++ b/JWT/JWT-Frontend/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="21" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/JWT/JWT-Frontend/.idea/modules.xml b/JWT/JWT-Frontend/.idea/modules.xml
new file mode 100644
index 0000000..899d49e
--- /dev/null
+++ b/JWT/JWT-Frontend/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/JWT-Frontend.iml" filepath="$PROJECT_DIR$/.idea/JWT-Frontend.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/JWT/JWT-Frontend/.idea/vcs.xml b/JWT/JWT-Frontend/.idea/vcs.xml
new file mode 100644
index 0000000..b2bdec2
--- /dev/null
+++ b/JWT/JWT-Frontend/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/Python-MySQL-Integration/.idea/.gitignore b/Python-MySQL-Integration/.idea/.gitignore
new file mode 100644
index 0000000..13566b8
--- /dev/null
+++ b/Python-MySQL-Integration/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/Python-MySQL-Integration/.idea/Python-MySQL-Integration.iml b/Python-MySQL-Integration/.idea/Python-MySQL-Integration.iml
new file mode 100644
index 0000000..9b09070
--- /dev/null
+++ b/Python-MySQL-Integration/.idea/Python-MySQL-Integration.iml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="Flask">
+    <option name="enabled" value="true" />
+  </component>
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.venv" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+  <component name="TemplatesService">
+    <option name="TEMPLATE_CONFIGURATION" value="Jinja2" />
+    <option name="TEMPLATE_FOLDERS">
+      <list>
+        <option value="$MODULE_DIR$/../Python-MySQL-Integration\templates" />
+      </list>
+    </option>
+  </component>
+</module>
\ No newline at end of file
diff --git a/Python-MySQL-Integration/.idea/dataSources.xml b/Python-MySQL-Integration/.idea/dataSources.xml
new file mode 100644
index 0000000..256f380
--- /dev/null
+++ b/Python-MySQL-Integration/.idea/dataSources.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
+    <data-source source="LOCAL" name="se10sessions@localhost" uuid="837942ce-bfa0-4630-aa8f-dadd2808c182">
+      <driver-ref>mysql.8</driver-ref>
+      <synchronize>true</synchronize>
+      <jdbc-driver>com.mysql.cj.jdbc.Driver</jdbc-driver>
+      <jdbc-url>jdbc:mysql://localhost:3306/se10sessions</jdbc-url>
+      <working-dir>$ProjectFileDir$</working-dir>
+    </data-source>
+  </component>
+</project>
\ No newline at end of file
diff --git a/Python-MySQL-Integration/.idea/inspectionProfiles/Project_Default.xml b/Python-MySQL-Integration/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..45f4b3a
--- /dev/null
+++ b/Python-MySQL-Integration/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,7 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="JsonStandardCompliance" enabled="false" level="ERROR" enabled_by_default="false" />
+    <inspection_tool class="PyInterpreterInspection" enabled="false" level="WARNING" enabled_by_default="false" />
+  </profile>
+</component>
\ No newline at end of file
diff --git a/Python-MySQL-Integration/.idea/inspectionProfiles/profiles_settings.xml b/Python-MySQL-Integration/.idea/inspectionProfiles/profiles_settings.xml
new file mode 100644
index 0000000..105ce2d
--- /dev/null
+++ b/Python-MySQL-Integration/.idea/inspectionProfiles/profiles_settings.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>
\ No newline at end of file
diff --git a/Python-MySQL-Integration/.idea/misc.xml b/Python-MySQL-Integration/.idea/misc.xml
new file mode 100644
index 0000000..756d868
--- /dev/null
+++ b/Python-MySQL-Integration/.idea/misc.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Black">
+    <option name="sdkName" value="Python 3.12 (Python-MySQL-Integration)" />
+  </component>
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.12 (Python-MySQL-Integration)" project-jdk-type="Python SDK" />
+</project>
\ No newline at end of file
diff --git a/Python-MySQL-Integration/.idea/modules.xml b/Python-MySQL-Integration/.idea/modules.xml
new file mode 100644
index 0000000..cba1fd1
--- /dev/null
+++ b/Python-MySQL-Integration/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Python-MySQL-Integration.iml" filepath="$PROJECT_DIR$/.idea/Python-MySQL-Integration.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/Python-MySQL-Integration/.idea/vcs.xml b/Python-MySQL-Integration/.idea/vcs.xml
new file mode 100644
index 0000000..6c0b863
--- /dev/null
+++ b/Python-MySQL-Integration/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/Python-MySQL-Integration/__pycache__/app.cpython-312.pyc b/Python-MySQL-Integration/__pycache__/app.cpython-312.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..307ccd067fcfbf5d7d93fcf2b2bfb51883eefebe
GIT binary patch
literal 1428
zcmbVL&1)M+6rb4-t)yK=Zj_{zZR|iS@V3OR36#=`p6oaQ$4ya7K^T@LJGSKPYUSBg
zQW+T((h~dRV|?_rIM@Ca?IEfTGJ``~(jIzKuuneay_MH;1HI(IypNfA@6GSMH@{{w
zX#(_%|L5v&5+SeAh)Fq9js+;si9;Of5|5UtCzT~nF3S}6Bv<j&vKr~KoA9)<7U_zc
z^it&%B@$tjr4Q&JT3KiMdOl7ul#UwTa1uX~gR_Hj=6`N$PI8UDNFBhNk(~4epGz$5
z=ntm};U9qa<lx3d9!IC7X*3Np^DiEnvQTfkcJNSSIjcF0TOsr6t{pO=akkN5L1<E;
z)Ecgf^1Fa>kSUb+e22NGboRl;Br+Jdjz0qSoP=li;jJ`AS|X;jyqT^-wjX9Hp$CCE
z7X4>(44j-6=f7B4oG&eW_W4R_VeZq2T`#d9sQR^F<$g1)__dq&nx$`+Zr-hhY>nF?
zoUGXO`b@nkl#1^$ehC6$i-QcXHu+m0-79wW>6gkhH(+NoHOtvrH3%6O%KfiP-vTDh
zV-VR1{sTvY%MqMu00MBp9MJk%3t}7Px_Z$X=tJ0B@8d1SMcbn9ky}3ZmO?}lQH!+b
z&{|K%`$O3}&-y|+K=eRca;Oh9z=<V%hg#>kpuOrcOpNU@p)${|x*}P(gW$2x9aH9)
z!I9^XT>)ll9E&EDRiAr8USlE0hl)(a4k}jc#_^FN71)oM)xZf<-U%ZV+zxPxt^;xG
zx=6+?=A&TZL<Aeaa2hV}7I%t0eXOI8?cMI`H`?<@Ms9a$XQ^k5cZ~79@4H5!y>OJh
zw%gii^|F(l?BssBoBgDH=OjUlk;826aOCPy?!#WL(8(3{E8X1eiKZBd_WVhj7*~7x
zL`R?43%mN%OJypWIFYn0s71}Pmdz2NuHu*DSlejy2SrE+8?Nm>s4%a|6L2JSRtu|P
za|VCgpe|VtKV7sDeZN6vAU2lUvV;u3K&aerz+@xh2)dAYqsFm)(Nm)8oF<D9s^PM)
z_!J!AHw|#Y`ZA^T4>H#wbFawQKV<wBDg2etx9>dl+j2iaB=uSTNq+m*(}_0{rRK3r
zq>(;q!?Q2<uk9z>`7SlzNIEUxm5=+V^+$<fY;XQ9=MNR_+2WJMpYHZ$qKrnbdJ9?V
BB2@qY

literal 0
HcmV?d00001

diff --git a/Python-MySQL-Integration/app.py b/Python-MySQL-Integration/app.py
new file mode 100644
index 0000000..188a7a2
--- /dev/null
+++ b/Python-MySQL-Integration/app.py
@@ -0,0 +1,29 @@
+from flask import Flask, render_template, request
+from sqlalchemy import null
+
+from entity.User import User
+from model.UserModel import UserModel
+
+app = Flask(__name__)
+
+
+@app.route('/')
+def home():  # put application's code here
+    return render_template('index.html')
+
+@app.route('/register', methods=['POST'])
+def register():
+    name = request.form.get('name')
+    email = request.form.get('email')
+    password = request.form.get('password')
+
+    # Save the user details to the database
+    user = User(
+        name = name,
+        email = email,
+        password = User.hash_password(password)
+    )
+    return UserModel.save_user(user)
+
+if __name__ == '__main__':
+    app.run()
diff --git a/Python-MySQL-Integration/entity/User.py b/Python-MySQL-Integration/entity/User.py
new file mode 100644
index 0000000..7e6efb4
--- /dev/null
+++ b/Python-MySQL-Integration/entity/User.py
@@ -0,0 +1,34 @@
+import uuid
+from sqlalchemy import Column, String, create_engine
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import validates, sessionmaker
+import bcrypt
+
+DATABASE_URL = 'mysql+pymysql://root:1234@localhost/se10sessions'
+engine = create_engine(DATABASE_URL)
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+Base = declarative_base()
+
+class User(Base):
+    __tablename__ = 'user'
+
+    # Use String type for the ID to store UUIDs
+    id = Column(String(36), primary_key=True, default=lambda: str(uuid.uuid4()))
+    name = Column(String(255), index=True)
+    email = Column(String(255), unique=True, index=True)
+    password = Column(String(255))
+
+    @staticmethod
+    def hash_password(password):
+        # Hash password before storing it
+        if password:
+            hashed = bcrypt.hashpw(password.encode('utf-8'), bcrypt.gensalt())
+            return hashed.decode('utf-8')
+        return password
+
+    def check_password(self, password):
+        # Verify password
+        return bcrypt.checkpw(password.encode('utf-8'), self.password.encode('utf-8'))
+
+# Create tables
+Base.metadata.create_all(bind=engine)
diff --git a/Python-MySQL-Integration/entity/__pycache__/User.cpython-312.pyc b/Python-MySQL-Integration/entity/__pycache__/User.cpython-312.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..78d832b9a913bffe8686b15819227138226142c4
GIT binary patch
literal 2167
zcmaJ?OKj9e7#@3V@5|0YLLh)j(<VjQ@TO5%@oZ=UR1JZ4c}P~ka@MoiP5fBKUSOjX
zZKX)1rxN9mw3nu*g2;hW1ridiTB%igA=*@sp%qB&g<DWKacTeYKC%JCNdD)4`Tu9W
z|DTyZ6eWUSEILopKL`l@!-VP(E6mdGz)T?n8Jvk!HuEND@hWcx)PN<Z0>^X#Q?w*i
z@_E4wS|K%Lh1IYxb7n-17@`{G5f*UtCRdKE${>dg$&j!-8@w5)Xcf>(H!I221|A(n
zMra%vVcbyjiQ$If){0BrG~8AvR9J`|sb=I*fs03<GE09vK&1~IGjG{cN_r$~4^bsW
zu<l_E+e29!$2q#nz$sHFx|h9(wL#s*ah`@R>SopeH<!vTcHOLFTlxqlqdTpFd%@h2
zEBN!?9Xp8Qczbv4e!uer(@E)O#&NwJF5b1X@|SxAmJreNo|AGcE9=oP<I`r|%}`-5
zYa6Nh&D5%K9kf#jBb76d${U;-V5q_;8hmx1M!*op(X3d*ORD)u%RYcPUrwP0UuQQ0
zv!Pmq(5oKRNNN~IjPN+B)hud6#*r!)qH&oDr(H~_kO%s-9kQKTu`B2~#Ol7ZAIKE)
zDxHCl$F%+!W<D>CYNqN6k|@rxf(BfV<;rIbDl*!611+&%U-b0s9XQ&P?CnYnBzt%5
z^hs;7Ts?Q-WWmcg_O|1N<R^XGKC(SL#7gei1K9SmUSWW3VSBFdBDCMstwBRSII8%n
zs<;YLxT}E_(cRQ9?Z0;X)baDy(!mo&M4CYhO%u(LtfiBJHi8Q@XyCM-H@&C-F(XGs
zs5QO}UQ*u9UdUsz5%j4V6d<tT`!Ib2%oG|!<k&J)!<8a}sW!&YaJ6A-Is^x}3RvCW
zQk_GEt-)J~{24dK4ToR#TaK56H6_svzJFBAd+BY7xJaeJ6e;99DrIyxle<JEY^NLp
z)8G)cUEKr&94=76zC$_PbuT%@C_7`rWr<r`$y%7G!UAYjm(fNa`V~3`vbzsR5j~TT
zyymawjZ^0)&dnsgKlI(9TYE}v`|h5(cmB@#(t+cp=KiZk9yYC?IxulyW?iW%eqWA1
zjIFyG^DC9Ahmrx~gMI~=`rdpk;M|)5hl0EY=r{jUJ)KEJHo+3&0(l!I8cbzyY9x1w
zyaN(xXBM6cE;iG?umZaV-**|jCLg?&%C{hby9G!Q{Tplk>dKc_rZe9<Upv=_N}IZF
z3-^>e%7aATT%zx{v!%r8QtZtA&>0`C{<uOznr7=3)-)Q?G|MsaCgWvIyO7t-ibc^h
zPaiaKStJZoA^@R0oKt~msfaB-Yx?VlTh)Wpm$EP%N`q`>-W`mrVT6_1ZwsO@ju9C?
z*8nn(9<JF?JPs`oSv4VDBa@Nq!d%yh`S8i&;f3hxiOthZlUrs^%||<mJqvQ<MAvlN
z<h~j2R_DB&DE2PInkUlJ$;pvY?A_wAC*ta7yePIT1(4LZ=yMIcc$O<KfTfLdB+8~n
z(g+icz}>H#fUH$m-XUR!kZxEuZO50r?RAd|VNF3B>Kq(mksv5Zh!MZwa!>cE?!(>5
zUhVX!ee4{u*NMuN>#L8wEmSxRuagf44FPgGJWx7~RNgb)G+#mwuCj8m4ia|rvb)CB
zfh-0%j(dcnk5T6w>iiq+d5m^HLdug^cTrvlue~-_3bz-fh1kZK{B7~aBlEG3K_6UK
r3a&2-&xI!LEO)i@Ib!qTR>X;4D4#12P|F-@nNHtFEq|i-eEj|gh*|uR

literal 0
HcmV?d00001

diff --git a/Python-MySQL-Integration/model/UserModel.py b/Python-MySQL-Integration/model/UserModel.py
new file mode 100644
index 0000000..4e71006
--- /dev/null
+++ b/Python-MySQL-Integration/model/UserModel.py
@@ -0,0 +1,16 @@
+from entity.User import SessionLocal
+
+
+class UserModel:
+    @staticmethod
+    def save_user(user):
+        db = SessionLocal()
+        try:
+            db.add(user)
+            db.commit()
+            return "User saved successfully"
+        except Exception as e:
+            print(f"Failed to save user. Rolling back. Error: {e}")
+            db.rollback()
+        finally:
+            db.close()
diff --git a/Python-MySQL-Integration/model/__pycache__/UserModel.cpython-312.pyc b/Python-MySQL-Integration/model/__pycache__/UserModel.cpython-312.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..a85d3b2a37df9bdad823ea0b3729c69543854744
GIT binary patch
literal 1133
zcmaJ=&rcIk5T5t83*E9+D8#15m^Bc!A`K?Q7-BF~$`7GLZ9LF4ZkF8ztJ^N@ZiOXa
zJaC{9gEtPwcsBe4+zej5aPUAjnvm#0Z<U&8>c#hVyKUsaBs)9v=9}-mnR)MHI2-~Z
z-}8raZxO&(>i80<8`U0SY=Z&{(x8B{2myvMQ1Ch^%ntTYS!@U5><{Y1k;7+H)6DC|
zDP5K{*+Y1`4u|SF;%|crS)@P~tBiuyVW*DF25cN>9PWXs8fjfoHJO~PAuO>N@>K`O
z>NZ%7n4i9eI9NrGDdw20!cHBHD1tH_6Q2Wt%h7r)Oxz~IM%`cqeMAo!m)Ee>=KBg>
z#joKF{%^;yA8r1dd^4oSYxo&12EG3hT7qR}29~^fPCg5C(~3^S_-t`zdL>GGE11$#
zRT0dRER%W7l{C#>xiTu{HL_^wZd51{Ttc|7Yg)cIFU(5vlZ22m4BZ$M;;jblvBOA;
z;<U(mp^&#6R@QV=b-2{BtS(sO4mj+BkuO?K&>$Q%pG-DDSskp*I!HAshad>G@sYvY
z*hnUI{YEa6y4LS1p?;Cf++Evxq!;_rcIMtx-$c<;=M9O{=L+<K<Qi8cv0ytKtxKeP
ztaLU5jYT?k(<JISd<(~3Jlwz)9OR-0{Hd+c^60C9%_(Y5lqWVP4?3?_LJ&T^HC`Tn
zdFRhB4%%Z!fVs1u`Huarq20w@c|Vf;#NVbFljX^+bUFRE!V*C3kdGabMK5t9=@~Wi
z64`h2!Yz2u4fiv9!Slnt%-%&d$--VQOIP|CVt-&G$tW`&XPuxZ7NvqJicUxrNvS1`
z+Po+(mL#nn;Z2LQLN2JJLyFNsHh2eBqQPjVik9mt`k>7&qSoPn?f8j9Y_!TiOT@K|
zs1KVa18P%?R^GA`w0rK5J(e>R;{qvjEqK#A(U1`%E`3>Mgs2LG5c&c=zgu_|Jp!WK
FoPS|9`}hC=

literal 0
HcmV?d00001

diff --git a/Python-MySQL-Integration/static/js/index.js b/Python-MySQL-Integration/static/js/index.js
new file mode 100644
index 0000000..cf578f5
--- /dev/null
+++ b/Python-MySQL-Integration/static/js/index.js
@@ -0,0 +1,29 @@
+function userRegistration() {
+    // Get form values
+    const name = document.getElementById('name').value;
+    const email = document.getElementById('email').value;
+    const password = document.getElementById('password').value;
+
+    // Prepare the data to be sent
+    const data = new URLSearchParams();
+    data.append('name', name);
+    data.append('email', email);
+    data.append('password', password);
+
+    // Send POST request
+    fetch('http://127.0.0.1:5000/register', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: data.toString(),
+    })
+    .then(response => response.text())
+    .then(result => {
+        alert(result);
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        alert('Failed to register user');
+    });
+}
diff --git a/Python-MySQL-Integration/templates/index.html b/Python-MySQL-Integration/templates/index.html
new file mode 100644
index 0000000..409b7ab
--- /dev/null
+++ b/Python-MySQL-Integration/templates/index.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Python-MySQL Intergration</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+  <style>
+    body {
+      background-color: #f0f2f5;
+    }
+    .container {
+      max-width: 600px;
+      margin: 5% auto;
+      padding: 2rem;
+      background-color: #ffffff;
+      border-radius: 12px;
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    }
+    h2 {
+      color: #007bff;
+      font-weight: bold;
+    }
+    .form-label {
+      font-weight: bold;
+    }
+    .btn-primary {
+      background-color: #007bff;
+      border: none;
+    }
+    .btn-primary:hover {
+      background-color: #0056b3;
+    }
+    .text-muted {
+      color: #6c757d;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <h2 class="text-center mb-4">User Registration</h2>
+    <form>
+      <div class="mb-4">
+        <label for="name" class="form-label">Full Name</label>
+        <input type="text" class="form-control" id="name" required>
+      </div>
+      <div class="mb-4">
+        <label for="email" class="form-label">Email address</label>
+        <input type="email" class="form-control" id="email"  required>
+      </div>
+      <div class="mb-4">
+        <label for="password" class="form-label">Password</label>
+        <input type="password" class="form-control" id="password"  required>
+      </div>
+
+      <button type="button" class="btn btn-primary w-100" onclick="userRegistration()">Sign Up</button>
+    </form>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+  <script src="{{ url_for('static', filename='js/index.js') }}"></script>
+</body>
+
+</html>