Löschen Button HTML

Avalon

Bekanntes Mitglied
Ich arbeite an einer Webanwendung, die Bilder im Browser darstellt. Die sollen natürlich auch gelöscht werden. Im Moment übergebe ich bei einem Click auf einen Button die ID des Bildes über den form Tag an meine Anwendung. Das Bild mit der ID wird dann auch aus der Datenbank gelöscht.
HTML:
<form action="/insights/delete?id=103" method="post">
Auf anderen Seiten habe ich mir mal angesehen, wie die das machen. Dort gibt es auch einen "Löschen" Button, aber die ID des Bildes taucht nirgendwo auf. Weder in der URL, noch im HTML Code selbst. Da steht im HTML Code nur
HTML:
<button class="button button--dialog">Bestätigen und löschen</button>
Klickt man da drauf, wird das Bild gelöscht. Aber irgendwas muss doch übergeben werden. Wie soll die Anwendung sonst wissen um welches Bild es sich handelt, welches Bild gelöscht werden soll? Von einer ID ist da nichts zu sehen, weder in der URL, noch im HTML Code selbst. Das möchte ich auch so haben, aber ich habe keine Ahnung, wie das funktioniert. Kann mir da jemand helfen? Ich habe ja schon eine Ahnung, das es ein absolutes Anfängerding ist. Aber ich komm nicht drauf.
 

M.L.

Top Contributor
Der sichtbare HTML-Teil ist ja nur die für den Browser verständliche Sprache. Die Parameterübergabe dürfte im Hintergrund über andere Services oder Programmiersprachen (PHP, JavaScript,...) erfolgen.
 

Avalon

Bekanntes Mitglied
Wenn ich mit den Google Entwicklertools im HTML Code die Bild ID 103 in z.B. 105 manuell ändere also
HTML:
<form action="/insights/delete?id=103" method="post">
in
HTML:
<form action="/insights/delete?id=105" method="post">
und dann auf den Absenden (Löschen) Button klicke, wird das Bild mit der ID 105 gelöscht (statt der 103). Das möchte ich verhindern und könnte es natürlich serverseitig abfangen. Aber wie oben schon erwähnt. Irgendwie muss es möglich sein, das die ID im HTML Code oder in der URL garnicht erst auftaucht und weder für den Browser noch für den User sichtbar ist, somit auch nicht manuell geändert werden kann. Auf anderen Seiten nutzen die nur den Button Tag ohne Parameter und kein Formular (auch mit den Google Entwicklertools angesehen). Aber wie machen die das dann?

Vielleicht noch als Zusatz. Es handelt sich um eine Spring Boot Anwendung (MVC Pattern) + Thymeleaf.
 
M

Mart

Gast
du haust da etwas durcheinander
Java:
?id=103
dieser teil in einer URL ist Teil eines GET requests .. das hat nichts mit der Methode POST zu tun

Post dateien werden beim body angehängt und nicht in der URL !

das musst du anders lösen ( Ajax Call damit kenn ich mich wenigstens noch aus oder JQuery usw )

da du beim seiten aufbau deine Bilder lädst zb aus einem ordner kannst du denen gleich eine ID geben die genau ihrem namen entspricht wenn das bild gelöscht werden sollte geht dein Backend den ordner durch und löscht das bild aus dem Ordner und dein Frontend kann dann entweder das bild raus werfen oder die seite neu laden auf basis des "neuen" ordners


und "nicht sichtbar für den user" ... wenn man es will findet man den frontend code im internet mit quelltext und so weiter... das zu "vertuschen" geht schlecht
 
Zuletzt bearbeitet von einem Moderator:

thecain

Top Contributor
dieser teil in einer URL ist Teil eines GET requests .. das hat nichts mit der Methode POST zu tun
Ein Post Request kann ohne Probleme auch QueryParams haben.

Zum Löschen würde ich auch ein HTTP DELETE verwenden. Die ID als Pathparam oder ggf auch als QueryParam. Das Abfangen wenn jemand etwas löschen will, das er nicht darf, durch verändern der URL musst du sowieso im Backend behandeln.
 
M

Mart

Gast
ja schön warum wird ein Post genutzt wenn alles um ein get sowieso gneutzt wird und der TE wollte ja nicht dass es im link erscheint dann braucht er halt ein komplettes post und kein mix aus post und get
 

Avalon

Bekanntes Mitglied
Ein Post Request kann ohne Probleme auch QueryParams haben.

Zum Löschen würde ich auch ein HTTP DELETE verwenden. Die ID als Pathparam oder ggf auch als QueryParam. Das Abfangen wenn jemand etwas löschen will, das er nicht darf, durch verändern der URL musst du sowieso im Backend behandeln.
Richtig. Die ID wird in der Tat als Query String Parameter an den Header angehängt. Das war auch das Ziel. Aber wie zum Geier schaffen die Jungs von Adobe Stock oder Shutterstock oder sonst irgendwer, das die ID im HTML Code im Frontend nirgendwo zu sehen ist. Woher weiß den ihr Backend, welches Bild gelöscht werden soll? Ich hänge mal eine Screenshot von meinem Portfolio bei AS ran. So sieht das bei denen aus. Nur ein Button in einem DIV Container. Keine Formular, keinerlei Parameter in der URL, nüscht? Ich bin ratlos.
 

Anhänge

  • button.jpg
    button.jpg
    658,6 KB · Aufrufe: 2
Zuletzt bearbeitet:

Barista

Top Contributor
Aber wie zum Geier schaffen die Jungs von Adobe Stock oder Shutterstock oder sonst irgendwer, das die ID im HTML Code im Frontend nirgendwo zu sehen ist.
Auf dem Bild sieht man nur eine zu löschende Grafik.

Wahrscheinlich weiss der Server, welche Grafik oben als einzelne Grafik angezeigt wird.

Die anderen Grafiken unten sind offenssichtlich nicht gemeint.

Wenn es sich um eine Tabelle oder eine andere Darstellung mehrerer auswählbarer Bilder handeln würde, wäre Deine Frage berechtigt, in diesem Fall aber nicht.
 

LimDul

Top Contributor
Wobei man dann dennoch die ID einfach ändern kann - die ist zwar nicht im Code zu sehen, aber mit den entsprechenden Tools kann man die trotzdem sehen und ändern.
 

mihe7

Top Contributor
Auf dem Bild sieht man nur eine zu löschende Grafik.

Wahrscheinlich weiss der Server, welche Grafik oben als einzelne Grafik angezeigt wird.
Warum sollten die Adobe-Leute den Zustand auf dem Server verwalten, noch dazu wenn die Sache bei einem Bild sehr einfach ist, da dieses in der Regel (data-URIs mal ausgenommen) in Form der Ressource-URL bereits über eine ID verfügt?
 

Barista

Top Contributor
Auf dem Bild sieht man nur eine zu löschende Grafik.

Wahrscheinlich weiss der Server, welche Grafik oben als einzelne Grafik angezeigt wird.
Warum sollten die Adobe-Leute den Zustand auf dem Server verwalten, noch dazu wenn die Sache bei einem Bild sehr einfach ist, da dieses in der Regel (data-URIs mal ausgenommen) in Form der Ressource-URL bereits über eine ID verfügt?
Ich weiss nicht warum die Adobe-Leute irgendetwas sollten.

Aber vor allem weiss ich nicht, welchen Beitrag dieser Post zur Beantwortung der Frage des TE beiträgt.
 

Barista

Top Contributor
Nichts, das war einfach eine Frage an Dich, wieso Du es als wahrscheinlich siehst, dass der Server den Zustand verwaltet -> es hätte sein können, dass Du dazu interessante Infos hast.
Vielleicht wird im JavaScript auf die Bild-URL zugegriffen, bzw. die Bild-ID/-URL gesoeichert.

Aber die Aussage des TE war, dass die Bild-ID nicht im Quelltext der Seite auftaucht, das spricht für das Vermerken der Bild-URL im Server.
 

mrBrown

Super-Moderator
Mitarbeiter
ja schön warum wird ein Post genutzt wenn alles um ein get sowieso gneutzt wird und der TE wollte ja nicht dass es im link erscheint dann braucht er halt ein komplettes post und kein mix aus post und get
Hier, ein paar Satzzeichen, die scheinen die ausgegangen zu sein: ......,,,,,,::::;;;;????!!!!–––– ;)

Wie @thecain schon sagte haben Query-Parameter nichts mit GET zu tun. Die sind ganz generell für URIs möglich, unabhängig vom Protokoll oder HTTP-Methoden.
 
K

kneitzel

Gast
Aber der Hinweis auf die Post Methode hilft nicht, denn genau wird ja schon genutzt:
<form action="/insights/delete?id=103" method="post">

Und wenn der TE eine Spring Applikation nutzt, dann ist die wichtige Information lediglich:
a) Eben kein @RequestParam für die id Nutzen
b) Statt dessen ein Feld nutzen und den Wert in dem Feld haben (Type kann hidden sein wie in #21 von @Barista erwähnt)
Und dann ist der Wert nicht mehr in der URL kodiert sondern kommt zusammen mit den übrigen Feldern des Formulars.
 
K

kneitzel

Gast
Ist aber trotzdem noch, wenn auch mit mehr Aufwand, durch den User veränderbar. Eine Backend Prüfung ist also unabdingbar
Wenn der Benutzer das Bild löschen darf, dann ist eh die Frage, was Du wie prüfen willst am Backend. Da muss man dann also etwas mehr das Design beleuchten um zu schauen, was die genauen Anforderungen sind.
 

Avalon

Bekanntes Mitglied
Der User darf im Backend sowieso nur seine Bilder löschen können
So ist es. Bilder anderer User kann er nicht löschen. Da hab ich einen Riegel vorgeschoben. Aber irgendwie hat es ein Geschmäckle, daß er durch Manipulation der URL oder des HTML Codes (jenachdem ob Postrequest oder als Pathvariable an URL angehängt) ein anderes Bild, als das angegebene löschen kann, auch wenn es sein eigenes ist. Aber ich hab mir mal andere ähnlich gelagerte Seiten angesehen... die lassen das alle so. Trotzdem bleibt ein Geschmäckle zurück. Ich mag das nicht.
 

mrBrown

Super-Moderator
Mitarbeiter
Aber irgendwie hat es ein Geschmäckle, daß er durch Manipulation der URL oder des HTML Codes (jenachdem ob Postrequest oder als Pathvariable an URL angehängt) ein anderes Bild, als das angegebene löschen kann, auch wenn es sein eigenes ist.
Das ist immer so, bei jeder Web-API, egal bei welcher.
Generell würde ich sogar sagen, je einfacher zu ändern, desto besser ist die API.
 

Avalon

Bekanntes Mitglied
Super und vielen respektvollen Dank an Alle, die mir hier immer wieder helfen. Nächste Woche ist Präsentation und Fachgespräch bei der IHK. Entweder ich bin dann einer von Euch auf dem Papier und gehe Euch richtig auf den Sack :-D, oder ne Lusche.
 

mihe7

Top Contributor
Entweder ich bin dann einer von Euch auf dem Papier
Jeder, der sich hier zwecks Inhalten (also keine Mobilfunkvertragsbots und solche, die es werden wollen) anmeldet und sich halbwegs anständig aufführt, ist doch Teil des Forums - und was wer auf dem Papier ist, spielt sowieso keine Rolle :)

EDIT: Fast vergessen... viel Erfolg bei Deinem Gespräch nächste Woche!
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
A Datei-Upload -> ausgewählte Datei wieder löschen HTML / CSS 1
B Navigation button nach Links versetzen HTML / CSS 31
Dimax HTML bei button click Formular an php senden aber andere seite öffnnen HTML / CSS 23
A Kontaktformular: Speichern Button soll nur weiterleiten, wenn alle Felder ausgefüllt sind HTML / CSS 17
T J Slider und Button HTML / CSS 1
M JavaScript/HTML/CSS Hilfe HTML / CSS 1
V externes CSS in html HTML / CSS 6
V Horizontales Scroll-HTML HTML / CSS 2
V Variablenname in meinem HTML-Objekt HTML / CSS 3
RashAGhul Html/Css Placeholder positionierung ändern HTML / CSS 6
PhilipMJNE Hilfe bei HTML und CSS! HTML / CSS 12
PhilipMJNE CSS in HTML via Link einbinden PROBLEM ! HTML / CSS 22
VPChief HTML Bei bestimmter eingabe in textfeld neu HTML Seite öffnen HTML / CSS 6
B Bilder aus Server in HTML anzeigen HTML / CSS 5
B Zeit für Doppelklick messen (HTML/JS) HTML / CSS 3
M Javascript: HTML-Datei erstellen und auf Festplatte speichern HTML / CSS 8
M HTML-Code einer fremden Webseite auslesen - geht das mit Javascript HTML / CSS 19
U Html Funktion Java Funktion zuweisen HTML / CSS 2
D Daten von einer HTML Datei auf eine andere HTML Datei bekommen HTML / CSS 2
E HTML DOM HTML / CSS 1
A Nur bestimmte Zeichen in HTML input Feld erlauben (JavaScript) HTML / CSS 11
Dimax Mehrere css Dateien in eine HTML Seite einbinden HTML / CSS 3
Dimax Variable vom Get Request in HTML abfangen HTML / CSS 9
A Mit Modal (Bootstrap) eine html Seite anzeigen, die von id abhängig ist HTML / CSS 0
D HTML- Formulare an den Server senden HTML / CSS 7
S Quiz mit HTML/PHP erstellen HTML / CSS 3
W Keylistener Applet in Html HTML / CSS 9
S HTML Datei per E-Mail versenden HTML / CSS 3
K Html Programmieroberfläche einbinden (java) HTML / CSS 1
_Andi84 Unfertige HTML Ersetzungsfunktion HTML / CSS 1
T [JS] Extrahiere werte aus HTML Tabelle (td) aber nur bestimmten Teil HTML / CSS 5
K Verständnis von HTML/CSS & JScript HTML / CSS 2
Pataraca mit HTML auf php zugreifen HTML / CSS 1
I zugehörige HTML bzw. PHP Datei in den Entwicklertools finden HTML / CSS 3
D Hilfe bei erster Html-Aufgabe (Rahmen) HTML / CSS 6
KaffeeFan HTML Text rotieren HTML / CSS 2
K How to create Html tables for java parser objects? HTML / CSS 2
EisKaffee HTML interner Link soll neues Fenster aufmachen HTML / CSS 2
H javascript - html Beispiel LQH, verwirklichung HTML / CSS 1
I Menü, Header, Content ausgliedern aus einer HTML Seite HTML / CSS 2
G HTMl Tabellen-Zelle zeilen oder Höhe begrenzen HTML / CSS 1
O HTML/CSS doppeltes DropDown Menu HTML / CSS 1

Ähnliche Java Themen

Neue Themen


Oben